额外的标记+ CSS解决方案会有帮助吗？
在当前容器的正上方复制标题（带有重复的列）。

<div id="container1">
    <table id="tbl">
        <thead>
            <tr>
                <th>header1</th>
                <th>header2</th>
            </tr>
            <tr>
                <th>header1</th>
                <th>header2</th>
            </tr>
        </thead>
    </table>
</div>
<div id="container">
    <table id="tbl">
     ...

使用CSS技巧隐藏表格中的实际标题

<table id="tbl">
    <thead>
        <tr class="dummy">
            <th><span>header1</span></th>
            <th><span>header2</span></th>
        </tr>
     ...

CSS

#container1, #container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

.dummy > th > span {
    display: block;
    height: 0;
    opacity: 0;
}

这个解决方案是公认的hacky。它工作得很好，即使与长标题内容。
小提琴-http://jsfiddle.net/uqz76rL1/长头小提琴-http://jsfiddle.net/3343Lg4x/
然而，如果td内容是驱动表格布局的内容，则它将不起作用，这一点从http://jsfiddle.net/kezztx55/中可以明显看出
因此，如果您有一个固定的表布局（或者如果您可以在container 1中放入一个虚拟行，其中包含驱动列宽的内容），它将工作。

我承认这花了一段时间，但它起作用了。因此，作为potatopeelings的答案的替代，我提出这个CSS怪物：
第一个
这取决于几个因素。
首先，目前的布局只适用于2列（它可以适用于更多，只是调整了一些东西）。
要点：您需要为每列定义一个最大值。现在我猜您可能有一个最大值，但是您没有指定，所以我希望您有。
您会注意到我删除了thead标记，为了定义标题，您需要使用css中的content属性，“\A”和white-space: pre;是至关重要的。

基本的简易js解决方案

这不需要更改现有的HTML标记。
您可以只复制整个表格，并在其旁边显示副本。然后迭代TR元素并隐藏第一个表格中的上半部分元素，并隐藏克隆的表格中的下半部分元素。

var myDiv = document.getElementById("container");
var myTable = document.getElementById("tbl");

var newTable = document.createElement("table");
myDiv.appendChild(newTable);

newTable.setAttribute("id", "newTable");
newTable.innerHTML =  myTable.innerHTML;

var rows = myTable.getElementsByTagName("tr");
var rowsCopy = newTable.getElementsByTagName("tr");

//start from 1 instead of 0 because first row are the headers
for(var i=1;i<rows.length;i++)
{
    if(i>(rows.length/2))
    {
        rows[i].style.display = "none";
    }else
    {
        rowsCopy[i].style.display = "none";
    }
}

在此处运行JSFiddle：http://jsfiddle.net/J3VB5/90/
这适用于具有偶数和奇数行以及更多列的情况。

在Chrome上做了一些实验后，我发现你可以通过在样式中添加break-inside: avoid;来重复<thead />（https：//codereview.chromium.org/2021703002/#ps20001）。显然，打印媒体类型依赖于此属性在每个页面上重复<thead />。

#container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;

}

#tbl thead {
    break-inside: avoid;
}

http://jsfiddle.net/dusxnzLb/
然而，似乎<thead />仅在column-count ≤4时重复。
这个技巧在Firefox（column-count doesn't break tables properly）或Safari（<thead /> doesn't repeat even in print mode）上不起作用。