i want to achieve that all the div that is in table values should be of the same height in short the height of all the div should be of the same height inside the table values
I have tried some solutions but didn’t work for me.
As shown in the image the first line item is the tallest so all the other have the height of the tallest one
here is the HTML code
<section class="section-4">
<div class="table">
<div class="table-header">
<div class="sr_no">
<p><strong>SR No.</strong></p>
</div>
<div class="des_of_goods">
<p><strong>Description of Goods</strong></p>
</div>
<div class="qty">
<p><strong>Qty</strong></p>
</div>
<div class="unit">
<p><strong>Unit</strong></p>
</div>
<div class="rate">
<p><strong>Rate</strong></p>
</div>
<div class="disc">
<p><strong>Disc. %</strong></p>
</div>
<div class="disc-amt">
<p><strong>Discount Amount</strong></p>
</div>
<div class="tax-amt">
<p><strong>Taxable Amount</strong></p>
</div>
</div>
<div class="table-values">
<div class="table-cell sr_no text-center">
<p><strong>2</strong></p>
</div>
<div class="table-cell des_of_goods">
<div class="content">
<p><strong>TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
SET R-45A HEATSET bLUE TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
SET R-45A HEATSET bLUE</strong></p>
<div class="add-info">
<p>HSN : 6004100 </p>
<p>Width: 60 ( inch ) </p>
<p>Buyer Ref: VO240052 </p>
</div>
<div class="order-info">
<p>Order no: SRFSO2425- 00429 </p>
<p>Challan/Packing no: SRFSD2425- 03410</p>
</div>
</div>
</div>
<div class="table-cell qty text-center">
<p>21,232.00</p>
</div>
<div class="table-cell unit text-center">
<p>Mtr.</p>
</div>
<div class="table-cell rate text-center">
<p>9,610.80</p>
</div>
<div class="table-cell disc text-center">
<p>100.00</p>
</div>
<div class="table-cell disc-amt text-center">
<p>10,000.00</p>
</div>
<div class="table-cell tax-amt text-center">
<p>30,77,002.00</p>
</div>
</div>
<div class="table-values">
<div class="table-cell sr_no text-center">
<p><strong>2</strong></p>
</div>
<div class="table-cell des_of_goods">
<div class="content">
<p><strong>TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
SET R-45A HEATSET bLUE</strong></p>
<div class="add-info">
<p>HSN : 6004100 </p>
<p>Width: 60 ( inch ) </p>
<p>Buyer Ref: VO240052 </p>
</div>
<div class="order-info">
<p>Order no: SRFSO2425- 00429 </p>
<p>Challan/Packing no: SRFSD2425- 03410</p>
</div>
</div>
</div>
<div class="table-cell qty text-center">
<p>21,232.00</p>
</div>
<div class="table-cell unit text-center">
<p>Mtr.</p>
</div>
<div class="table-cell rate text-center">
<p>9,610.80</p>
</div>
<div class="table-cell disc text-center">
<p>100.00</p>
</div>
<div class="table-cell disc-amt text-center">
<p>10,000.00</p>
</div>
<div class="table-cell tax-amt text-center">
<p>30,77,002.00</p>
</div>
</div>
<div class="table-values">
<div class="table-cell sr_no text-center">
<p><strong>2</strong></p>
</div>
<div class="table-cell des_of_goods">
<div class="content">
<p><strong>TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
SET R-45A HEATSET bLUE</strong></p>
<div class="add-info">
<p>HSN : 6004100 </p>
<p>Width: 60 ( inch ) </p>
<p>Buyer Ref: VO240052 </p>
</div>
<div class="order-info">
<p>Order no: SRFSO2425- 00429 </p>
<p>Challan/Packing no: SRFSD2425- 03410</p>
</div>
</div>
</div>
<div class="table-cell qty text-center">
<p>21,232.00</p>
</div>
<div class="table-cell unit text-center">
<p>Mtr.</p>
</div>
<div class="table-cell rate text-center">
<p>9,610.80</p>
</div>
<div class="table-cell disc text-center">
<p>100.00</p>
</div>
<div class="table-cell disc-amt text-center">
<p>10,000.00</p>
</div>
<div class="table-cell tax-amt text-center">
<p>30,77,002.00</p>
</div>
</div>
</div>
</section>
here is the CSS
.section-4 {
width: 100%;
border: 1px solid #000;
border-top: 0;
}
.section-4 .table .table-header {
display: flex;
text-align: center;
vertical-align: middle;
}
.section-4 .table .sr_no,
.section-4 .table .unit {
border-right: 1px solid black;
width: 3%;
}
.section-4 .table .unit {
width: 5%;
}
.section-4 .table .qty {
border-right: 1px solid black;
width: 8.3%;
}
.section-4 .table .des_of_goods {
border-right: 1px solid black;
width: 49%;
}
.section-4 .table .table-values .des_of_goods .content {
padding: 0 2px;
}
.section-4 .table .rate,
.section-4 .table .disc,
.section-4 .table .tax-amt,
.section-4 .table .disc-amt {
border-right: 1px solid black;
width: 8.75%;
}
.section-4 .table .tax-amt {
border-right: 0;
}
.section-4 .table .table-values {
display: flex;
/* flex-flow: row wrap; */
/* align-items: stretch; */
}
.section-4 .table .table-values .table-cell {
border-top: 1px solid black;
/* height: 100%; */
flex-grow: 1;
}
.section-4 .table .table-values .table-cell:not(:nth-child(2)) {
display: flex;
align-items: center;
justify-content: center;
}
.section-4 .table .table-values .table-cell .add-info,
.section-4 .table .table-values .table-cell .order-info {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.section-4 .table .table-values .table-cell .add-info {
/* margin-top: 5px; */
}
.section-4 .table .table-values .table-cell .des_of_goods .content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section-4 .table .table-values .table-cell .add-info p {
white-space: nowrap;
}
New contributor
Atul Sharma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.