javascript - 跨多个布局列拆分 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;
} 

但这似乎没有帮助。

这是一个说明情况的 fiddle :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;
}

fiddle

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

并且如果您的行数不断变化，则需要一个 fiddle (边界不均匀)

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