时间戳

首页 > 解决方案 > 在表格内对齐表格

html - 在表格内对齐表格

问题描述

我有一个包含另一个表的表，以便在 td 元素中获取多行。我想对齐单元格, 和 ,Some以thing A使Something A它们具有相同的高度。
Something BSomething 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>

期望的结果应该是这样的
在此处输入图像描述

标签： htmlhtml-table

解决方案

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>

推荐阅读