有没有办法使用 CSS 成对打破表格行？

Question

假设您有一个有两行的表。但是由于某种原因，您无法知道容器的大小，并且您希望它破裂。然而，奇数行和偶数行粘在一起是至关重要的。换句话说，而不是得到这个： 我想得到这个：

有没有可能用 CSS 实现这种效果？

Answer 1

我确实做到了！配方很简单：

1. 您需要应用this thread 中的解决方案，将table 显示属性更改为block，并将inline-block 用于td 元素。

2. 对于每对垂直的单词，你都排成一行。在每一行中放置一个表格，其中有 2 行和 1 个单元格。上面的单词进入上排单元格，另一个进入下排单元格。

调整窗口大小以查看表格如何自动换行。

#wrappable {
  display: block;
}
#wrappable td {
  display: inline-block;
}

<table id="wrappable">
  <tr>
    <td>
      <table>
        <tr><td>Column 1 – upper row</td></tr>
        <tr><td>Column 1 – bottom row</td></tr>
      </table>
    </td>
    <td>
      <table>
        <tr><td>Column 2 – upper row</td></tr>
        <tr><td>Column 2 – bottom row</td></tr>
      </table>
    </td>
    <td>
      <table>
        <tr><td>Column 3 – upper row</td></tr>
        <tr><td>Column 3 – bottom row</td></tr>
      </table>
    </td>
    <td>
      <table>
        <tr><td>Column 4 – upper row</td></tr>
        <tr><td>Column 4 – bottom row</td></tr>
      </table>
    </td>
    <td>
      <table>
        <tr><td>Column 5 – upper row</td></tr>
        <tr><td>Column 5 – bottom row</td></tr>
      </table>
    </td>
  </tr>
</table>

轰隆隆！完成！它在 Firefox 64.0.2 中完美运行，即使在该表上完成了转换。