Table with FlexBox - TD height issue

Question

I have a table where

first column's <td> has divs with display:flex
second columns's <td> also has divs with no display property set. So the two divs stack upon each other (intended).

Problem : Since the second column's td has divs stacked upon each other its height increases due to which the first columns's td looks small.

Expected : Both td should have same height.

Tried : On first columns td

height:100%
align-items:stretch
position

Cannot give a fix height as the data is dynamic, second columns td can have more divs.

.table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  justify-content: center;
  text-align: center;
}

.d-flex {
  display: flex;
  height: 100%;
  align-items: stretch;
}

<div class="container">
  <table class="table">
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
    </thead>
    <tbody>
      <tr>
        <td class="d-flex">
          <div>Data</div>
          <div>1-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>1-2</div>
        </td>
      </tr>

      <tr>
        <td class="d-flex">
          <div>Data</div>
          <div>2-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>2-2</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

table has issues with flexbox check this https://stackoverflow.com/questions/41421512/why-does-flex-box-work-with-a-div-but-not-a-table — Sanan Ali, Jul 28 '22 at 05:46
Interesting, so seems like my best bet is to drop `flex` on `table` — Bhavik Patel, Jul 28 '22 at 05:54

score 0 · Accepted Answer · answered Jul 28 '22 at 08:12

You probably do not need to reset display for td,div can instead be reset to inline.

Eventually, you may use white-space on td to keep the (inline)div on a single line.

Example with inline div.

.table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  justify-content: center;
  text-align: center;
}

.d-flex >div{
  display:inline;
}

<div class="container">
  <table class="table">
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
    </thead>
    <tbody>
      <tr>
        <td class="d-flex">
          <div>Data</div>
          <div>1-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>1-2</div>
        </td>
      </tr>

      <tr>
        <td class="d-flex">
          <div>Data</div>
          <div>2-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>2-2</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Table with FlexBox - TD height issue

1 Answers1