logo标签列表

将表格分成两半

htmlcss-tables
14
有没有一种方法可以使用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，但我必须只使用一个表格，因为我需要一致的列宽（表格必须具有自动布局）。
3
我认为这有点违背“桌子”的定义。如果它是一个流动的元素，它就不是一张桌子；反之，如果它是一张桌子，它就不能是流动的。虽然你可能可以通过奇怪的定位来解决这个问题…… - davin
我也有同样的想法，但由于我不是HTML/CSS方面的专家，所以决定问一下... :( - Luiz Borges
1个回答
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/

它似乎可以工作，但在IE中不行，只有在Chrome的“-webkit”变体中才能工作。这不会是什么问题，因为我将使用Prince XML。另外，我注意到单元格可能会在列之间断开，有没有办法避免这种情况？ - Luiz Borges
据我所知，没有任何方法。 - eagle12
在IE 10中使用-ms-column-count可以正常工作。至于单元格换行...那很困难且不一致，或者至少我还没有找到一种一致的方法来做到这一点。您可以通过设置display: inline-block或将其内容包装在具有该样式的div中，使单个单元格不换行，但整行将无法像那样协同工作。某些内容将正常工作，而其他内容将具有奇怪的缩进，通常是第二列。还有column-break属性，但支持不稳定，我还没有找到一种良好地与表中整行配合使用的方法。 - Randolpho
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接