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 >
  <table >
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
    </thead>
    <tbody>
      <tr>
        <td >
          <div>Data</div>
          <div>1-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>1-2</div>
        </td>
      </tr>

      <tr>
        <td >
          <div>Data</div>
          <div>2-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>2-2</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

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 >
  <table >
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
    </thead>
    <tbody>
      <tr>
        <td >
          <div>Data</div>
          <div>1-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>1-2</div>
        </td>
      </tr>

      <tr>
        <td >
          <div>Data</div>
          <div>2-1</div>
        </td>
        <td>
          <div>Data</div>
          <div>2-2</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>