将表格分成两半

无论如何都要使用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进行拆分。

我知道我可以使用2个表并使用display:inline-table，但由于我需要一致的列宽（我必须使用自动布局），所以我必须只使用一个表。

来源

2011-06-07 Luiz Borges

我觉得那种蔑视表的“定义”。如果它是一个流体元素，它不会是一张桌子，相反，如果它是一张桌子，它不是流动的。虽然你可能能够用奇怪的定位来破解这个... – davin 2011-06-07 01:06:17

我以为这么多，但是因为我不是HTML/CSS的专家，所以我决定问... :( – 2011-06-07 01:08:40

您可以使用多列，但它是一个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/

来源

2011-06-07 01:07:42 eagle12

它似乎能够工作，但不能IE以及Chrome中的'-webkit'变种，这不会成为一个问题，因为我将使用Prince XML，而且我注意到单元格可能在列之间断开，是否有办法避免这种情况？ – 2011-06-07 01:23:31

据我所知，没有没有办法。 – eagle12 2011-06-07 01:42:06

从IE 10开始工作，带-ms-column-count。至于细胞破碎......这很困难和不一致，或者至少我还没有找到你可以通过设置'display：inline-block'或者将它的内容封装在一个带有该样式的div中，但是整行不会像这样合作，有些内容可以正常工作，其他内容会变得古怪，经常在第二栏中有缩进。还有'c olumn-break'属性，但支持很少见，我还没有让它们在表中的整行上运行良好。 – Randolpho 2014-07-01 17:50:58

将表格分成两半

回答

相关问题