CSS多列用于表格

Question

我有一张细长但很长的表格，每个月有一行。它非常长，以至于在大多数屏幕分辨率下人们必须滚动才能看到底部。由于表格右侧有足够的空间，我想自动将表格分成多列；每列只取其中一些表格行。

CSS多列似乎是这个任务的理想解决方案，但是column-width不适用于表格：

适用于：非替换块级元素（除表格元素外）、表格单元格和内联块级元素

我应该使用什么代替？（我不关心IE）

- cweiske

Answer 1

正如您所提到的，您可以使用CSS多列，在您的表格周围添加一些类似“treecolumn”的类，然后在该类上使用以下CSS例如，您想让您的表格具有3列：

.treecolumn{
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

请注意，Internet Explorer 9及更早版本不支持column-count属性。以下是一个示例：PLUNKER 更新： 如果您想在列中拥有标题，我不知道这是否安全，但您可以使用另一个表格，在另一个包装器中但具有相同的类，并重复您的标题与您的列数相同。在此示例中，我有3列，因此在我的表格上方添加了此内容：PLUNKER

<div class="treecolumn">
  <table>
    <tr>
       <th>first</th>
       <th>second</th>
    </tr>
    <tr>
       <th>first</th>
       <th>second</th>
    </tr>
    <tr>
       <th>first</th>
       <th>second</th>
    </tr>
 </table>
 </div>

我添加了以下CSS来使两个表格列对齐：

table td,table th{
  width: 60px;
  text-align: center;
}

- Shirin Abdolahi

---

表头不会重复，但是目前我可以接受这种情况。 - cweiske

这需要我事先知道列数，但我不知道。 - cweiske

不适用于Firefox 68。在Chrome 75中适用。 - GSerg

Firefox浏览器中的一个bug，当表格位于css-multicol内时无法正常换行：https://bugzilla.mozilla.org/show_bug.cgi?id=888257 - Aner

Answer 2

您还可以使用jQuery方法来实现此功能，它可以在任何浏览器中运行：

$.fn.extend({
    multipleColumns: function(numCols) {
        var listTableRows = $('.multi').find('tbody tr');
        var numlistTableRows = listTableRows.length;        
        var numItemsPerCol = Math.ceil(numlistTableRows / numCols);
        var currentColNum = 1,
            currentRowNumber = 1,
            returnHtml = '',
            i = 0;

        for (i = 1; i <= numCols; i++) {
            $('.multi').parent().append('<table class="column table-column-' + i + '"><thead><th>test</th></thead></table>');
        }

        $.each(listTableRows, function(i, v) {
            if (currentRowNumber <= numItemsPerCol) {                
                currentRowNumber++;                
            } else {
                currentRowNumber = 1
                currentColNum++;
            }
            $('.table-column-' + currentColNum).append(v);
        });
        $('.multi').remove(); /*clean previous content */

    }
});

$('.multi').multipleColumns(2);

用法：

$('.multi').multipleColumns(2); // Change the number to the amount of columns you want

CSS：

.column { float:left; } // is needed to float the columns next to eachother

演示在这里：JSFIDDLE

- Rotan075

---

使用纯CSS的方法比在我不需要它时加载jQuery更容易、更快速，而且出错的可能性更小。 - cweiske

真的，但仅使用CSS并不是解决多浏览器问题的方法。就像@shirin所说的那样。它只能覆盖ie10+，因此如果您不需要担心ie9和旧版浏览器，则仅使用CSS的解决方案就可以解决问题。 - Rotan075