将一张桌子分成两半

Question

无论如何使用CSS将表分成两半并且并排显示这两个部分.

例如,拿这个:

| row1 | row1 | row1 |
| row2 | row2 | row2 |
| row3 | row3 | row3 |
| row4 | row4 | row4 |
| row5 | row5 | row5 |

并做到这一点:

| row1 | row1 | row1 |    | row4 | row4 | row4 |
| row2 | row2 | row2 |    | row5 | row5 | row5 |
| row3 | row3 | row3 |

我可以更改HTML标记(比如使用自定义类标记"break"行),但我必须能够通过CSS决定是否拆分表.

我知道我可以使用两个表并使用display:inline-table,但我必须只使用一个表,因为我需要一致的列宽(表必须有自动布局).

Answer 1

你可以使用多列,但它是一个CSS3属性.例如:

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

这应该适用于现代浏览器

您也可以尝试这种方法