我有一张细长但很长的桌子，每个月的每一天都有一排。它太长了，人们必须在大多数屏幕分辨率上滚动才能看到底部。由于表格右侧有足够的空间，我想将表格自动拆分为多列；每列只占用一些表格行。
CSS 多列似乎是此任务的理想解决方案，但 column-width 不适用于表格：
适用于：不可替换的块级元素（表格元素除外）、表格单元格和行内块元素
我可以用什么代替？ （我不关心IE）
【问题讨论】：
标签： html css multiple-columns css-tables
正如您所提到的，您可以使用 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 列，因此我将其添加到我的表格上方的 html 中 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;
}
【讨论】：
您也可以使用 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
【讨论】：