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

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

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;
} 

但这似乎没有帮助

下面是一把小提琴，说明了这种情况：

---

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

我尝试了一些随机的想法，但在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 -->

.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;
}