CSS 表的多列

Question

我有一个细长的 table ，一个月中的每一天都有一行。它太长了，以至于人们必须在大多数屏幕分辨率下滚动才能看到底部。由于table右边有足够的space，我想将table自动拆分成多列；每列仅包含 table 行中的一部分。

CSS 多列似乎是此任务的理想解决方案，但 column-width 不适用于 tables:

Applies to: non-replaced block-level elements (except table elements), table cells, and inline-block elements

我可以用什么代替？（我不关心IE）

Answer 1

正如您提到的，您可以使用 CSS 多列，将 table 与一些 class 包裹起来，例如 "treecolumn" 并在其上使用此 CSSes class 例如你的 table 有 3 列 :

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

请注意，Internet Explorer 9 及更早版本不支持 column-count 属性。这是一个 plunker

更新：如果你想在你的专栏中有 headers，我不知道这是否是一种安全的方法，但你可以在另一个包装器中有另一个 table，但具有相同的 class，并重复您的 headers 与您的列数一样多。在此示例中，我有 3 列，因此我将其添加到 table PLUNKER 上方的 html :

<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 列：

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

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

CSS 表的多列

CSS multi-column for tables

html

css

multiple-columns

css-tables