跨多个布局列拆分 HTML 表格（在 Firefox 中）

Question

这是一个似乎主要适用于 Firefox 的问题。我使用以下 CSS 样式在 HTML 中有一个两列布局：

div.column-container {
   -webkit-column-count: 2;
   -webkit-column-gap: 10px;
   -moz-column-count: 2;
   -moz-column-gap: 10px;
   column-count: 2;
   column-gap: 10px;
}

这对文本和一般内容非常有用，但我有一个大表，我想将其拆分为两列，并且现在看来，该表只进入一列或另一列。

我尝试了各种方法，例如

div.column-container tr {
   page-break-after: auto;
   page-break-before: auto;
} 

但这似乎没有帮助。

这是一个说明情况的小提琴：http://jsfiddle.net/hq2uukm5/1/

有谁知道如何将一个表拆分为多个列？

Answer 1

我尝试了一些随机的想法，但无法在 Firefox 中运行。

我想出的唯一办法是修复隐藏在第二列上的顶部边框并修复 chrome 中列之间的大间隙..

div.column-container { display: inline-block; }

tr:nth-child(33) td {
border-width: 2px 1px 1px 1px;
}

因此，这不是问题的直接答案，而是对于那些不需要实际表格但想要表格样式布局的人的替代方法。

html

<div class="wrapper">

<div class="table">
    <div class="tr"><div class="td">Test</div><div class="td">Test</div><div class="td">Test</div></div>
    <div class="tr"><div class="td">Test</div><div class="td">Test</div><div class="td">Test</div></div>
    <div class="tr"><div class="td">Test</div><div class="td">Test</div><div class="td">Test</div></div>
    <div class="tr"><div class="td">Test</div><div class="td">Test</div><div class="td">Test</div></div>
</div><!-- end table -->

</div><!-- end wrapper -->

css

.wrapper {
    text-align: center; /* table needs a wrapper to center it */
}

.table {
    display: inline-block; /* required to keep a nice spacing between columns */
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

.tr {
    display: block;
}

.td {
    display: inline-block;
    border-width: 1px 0px 0px 1px;
    border-style: solid;
    border-color: #000000;
    padding: 5px;
    width: 50px;
    text-align: center;
}

/* the following is to make borders even on all cells, something that tables do better than divs */

.td:last-child {
    border-width: 1px 1px 0px 1px;
}

.tr:last-child {
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #000000;
}

.tr:nth-child(6) {
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #000000;
}

小提琴

https://jsfiddle.net/Hastig/mmoh8kkd/

如果你的行数不断变化，那就麻烦了（甚至没有边界）

https://jsfiddle.net/Hastig/jru2a5ta/