css – 通过列计数拆分时重复表头

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

额外的标记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;
}

诚然,解决方案很糟糕.即使标题内容很长,它也能很好地工作.

小提琴 – http://jsfiddle.net/uqz76rL1/
摆弄长头 – http://jsfiddle.net/3343Lg4x/

但是,如果您的td内容正在推动桌面布局,那么它将无法正常工作,这一点从这个小提琴 – http://jsfiddle.net/kezztx55/显而易见

因此,如果您有一个固定的表格布局(或者如果您可以在容器1中放入一个包含驱动列宽的内容的虚拟行),它将起作用.