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

Question

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

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

标签： htmlcsshtml-table

Answer 1

我真的做到了这一点！食谱很简单：

1. 您需要应用此线程table中的解决方案，将display 属性更改为block, 和inline-blockfortd元素。

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 中完美运行，即使在该表上完成了转换。