Html Question posted in
Some basic documentation can be found here.

Html – Making all div to follow the height of the tallest div

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
enter image description here

.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;
}
<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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    enter image description here

    want to achieve this using div as for fixed width using flexbox to achieve the tallest height of the div to all others


  2. 0

    For your example – which is not an actual table and therefore suffers from columns not having the right width – you could use grid with grid-auto-rows: 1fr;

    .container {
  display: grid;

  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;

}

.container div {
  outline: 1px solid red;
}
    <div class="container">
  <div>
    row 1
  </div>
  <div>
    row 2
  </div>
  <div>
    row 3.1<br>row 3.2<br>row 3.3
  </div>
</div>

    This is how it would look like if applied to your setup: the only thing changed for HTML is that all your table-values are wrapped in one div. (It still suffers from your original problem that the columns of the different rows don’t line up correctly if the window is too small, but that can only be solved if you use something different then flex).

    /* CSS to make rows equal height */
.section-4 .table-body {
  display: grid;
  grid-auto-rows: 1fr;
}


/* all of your original code */
.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;
}
    <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 that wraps around all your  table-values -->
    <div class="table-body">
      <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>
  </div>
</section>

    If you can use subgrid, you could use table, which would also have semantic meaning or any HTML structure you want like yours. You might need to adapt the CSS a bit; right now is a of a proof of concept and probably does not fully reflect what you need:

    table {
  display: grid;
  grid-template-columns: 1fr 1fr max-content;
}

tbody,
thead,
tr {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-auto-rows: 1fr;
}
    <table>
  <tbody>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
    </tr>

    <tr>
      <td>Row 1-1</td>
      <td>Row 1-2</td>
      <td>Row 1-3</td>
    </tr>

    <tr>
      <td>Row 2-1</td>
      <td>Row 2-2</td>
      <td>Row 2-3.1<br>Row 2-3.2<br>Row 2-3.3<br>Row 2-3.4</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  3. 0

    There are multiple ways we can perform it,

    1. Use CSS Flexbox
    2. Use display:Grid
      For css Flexbox u can refer https://www.w3schools.com/css/css3_flexbox.asp
      and for
      CSS Grid u can refer https://www.w3schools.com/css/css_grid.asp

    i would suggest go for flexbox if ur using 1-d designs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search