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中使用任何内容。

我唯一想到的就是修复隐藏在第二列上的顶部边框并修复镀铬中列之间的大间隙。

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/

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

1 个答案: