将一张桌子分成两半

时间:2011-06-07 01:03:34

标签: html css-tables

无论如何,使用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标记(比如用自定义类标记“破解”行),但我必须能够通过CSS判断表是否会被拆分。

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

1 个答案:

答案 0 :(得分:5)

您可以使用多列,但它是CSS3属性。例如:

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

这应该适用于现代浏览器

你也可以尝试这种方法

http://www.csscripting.com/css-multi-column/