在表格内对齐表格

Question

我有一个包含另一个表的表，以便在 td 元素中获取多行。 我想将单元格Some ， thing A与Something A和
Some , thing B与Something B使它们具有相同的高度。

 td { border: 1px solid black; }

 <table> <tr> <td> <table> <tr> <td> Some </td> <td> thing A </td> </tr> <tr> <td> Some </td> <td> thing B </td> </tr> </table> </td> <td> <table> <tr> <td> Something A<br />bigger </td> </tr> <tr> <td> Something B<br />bigger </td> </tr> </table> </td> </tr> </table>

期望的结果应该是这样的

Answer 1

Flexbox 应该会有所帮助。

我的答案受到这个 SO answer的启发

 td { border: 1px solid black; } #outer-row { display: flex; }.outer-cell { flex: 1; }

 <table id="outer-table"> <tr id="outer-row"> <td class="outer-cell"> <table class="inner-table"> <tr> <td> Some </td> <td> thing A </td> </tr> <tr> <td> Some </td> <td> thing B </td> </tr> </table> </td> <td class="outer-cell"> <table class="inner-table"> <tr> <td> Something A<br />bigger </td> </tr> <tr> <td> Something B<br />bigger </td> </tr> </table> </td> </tr> </table>