通过列数拆分时重复表头 [英] Repeating table header when splitting via column-count

问题描述

我正在将Magento中的产品列表输出为包装在表格中的简单列表。

I am outputting a list of products in Magento, as a simple list wrapped in a table.

由于此列表可能会很长（超过100种产品），我已经使用了来自
自动将表格分成两部分，以提高可读性等。

As this list can get quite long (100 products+), I've used the ideas from here to automatically split the table into two, to help with readability etc.

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

但是，此方法只是将表格分为两列。有谁知道我如何才能在第二列中重复使用表头？

However, this method just flows the table into 2 columns. Does anyone know how I can get the table header to also repeat in the second column?

使用链接的答案，您会看到这个小提琴，显示了我的位置： http://jsfiddle.net/J3VB5/51/

Using the linked answer, you can see this fiddle which shows where I am at: http://jsfiddle.net/J3VB5/51/

推荐答案

是否需要额外的标记+ CSS解决方案帮助？

Would an extra markup + CSS solution help?

在上方复制标题（带有重复的列）您的当前容器。

Duplicate your header (with repeated columns) right above your current container.

<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技巧隐藏表中的实际标头

Hide the actual header in your table with CSS trickery

<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;
}

该解决方案确实很黑。即使标题内容很长，它也能很好地工作。

The solution is admittedly hacky. It works pretty well even with long header content.

小提琴- http://jsfiddle.net/uqz76rL1/
带有较长标题的小提琴- http://jsfiddle.net/3343Lg4x/

但是，如果您的td内容是驱动表布局的因素，那么从此小提琴中可以明显看出-- http://jsfiddle.net/kezztx55/

However it will NOT work if your td content is what is driving the table layout as is obvious from this fiddle - http://jsfiddle.net/kezztx55/

因此，如果您的表布局固定（或者您可以在container1中放入一个虚拟行，其中包含驱动列宽的内容）。

So, if you have a fixed table layout (or if you can put in a dummy row in container1 containing the content that drives your column width) it will work.

这篇关于通过列数拆分时重复表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！