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>

Answer 1

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>