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

Question

我在 Magento 中输出一个产品列表，作为一个包含在表格中的简单列表。

由于此列表可能会很长(超过 100 种产品)，我使用了 ideas from here 自动将表格分成两部分，以帮助提高可读性等。

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

但是，这种方法只是将表格分成 2 列。有谁知道如何让表头在第二列中重复出现？

使用链接的答案，您可以看到显示我所在位置的 fiddle :http://jsfiddle.net/J3VB5/51/

Answer 1

额外的标记 + 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。即使标题内容很长，它也能很好地工作。

fiddle - http://jsfiddle.net/uqz76rL1/ 摆弄长标题 - http://jsfiddle.net/3343Lg4x/

但是，如果您的 td 内容正在驱动表格布局，那么它将无法工作，从这个 fiddle 中可以明显看出 - http://jsfiddle.net/kezztx55/

因此，如果您有一个固定的表格布局(或者如果您可以在 container1 中放置一个虚拟行，其中包含驱动您的列宽的内容)它就可以工作。