有没有一种方法可以使用CSS将表行成对中断？

Question

假设您有一个包含两行的表。但是由于某种原因，您不知道容器的大小，并且希望将其破坏。但是，至关重要的是，奇数行和偶数行必须连在一起。换句话说，不是得到这个： 我想得到这个：

是否可以通过CSS达到这种效果？

Answer 1

我实际上已经做到了！食谱很简单：

1. 您需要将解决方案从this thread应用于table的显示属性更改为block，并将inline-block的{​​{1}}元素更改为<{1}}。 / p>

2. 对于每对垂直单词，您都需要一行。在每一行中，您放置了一个表格，该表格各有2行和1个单元格。高位单词进入高行单元格，另一个进入低行单元格。

调整窗口大小以查看表如何包装自身。

td

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

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