通过列数拆分时重复表头

Question

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

由于此列表可能会很长（100 多个产品），因此我使用了 ideas from here 自动将表格一分为二，以提高可读性等。

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

但是，这种方法只是将表格分成 2 列。有谁知道我怎样才能让表头在第二列中也重复？

使用链接的答案，您可以看到显示我所在位置的小提琴：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;
}

这个解决方案无疑是老生常谈。即使标题内容很长，它也能很好地工作。

小提琴 - http://jsfiddle.net/uqz76rL1/ 摆弄一个长标题 - http://jsfiddle.net/3343Lg4x/

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

所以，如果您有一个固定的表格布局（或者如果您可以在 container1 中放置一个虚拟行，其中包含驱动您的列宽的内容）它会起作用。

Answer 2

我承认这需要一段时间，但它确实有效。因此，作为potatopeelings 答案的替代方案，我提出了这个CSS 怪物：

#container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    
}
tbody tr:nth-child(7n+1) td{
    white-space: pre;
}
tbody tr:nth-child(7n+1) td:first-child:before {  
    content:"Header 1 \A";
}
tbody tr:nth-child(7n+1) td:last-child:before {  
    content:"Header 2 \A";
}
tbody tr:nth-child(7n+1) td:before { 
    background-color:red;
    height:20px;
    width:100%;
}

<div id="container">
<table id="tbl">
<tbody>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    </tbody>
</table>    
</div>

不过，这取决于几个因素。

首先，当前布局仅适用于 2 列（它可以使用更多列，只需调整一些东西）。

要点：您需要为每列定义一个最大值。现在我猜你可能确实有一个最大值，但是你没有指定一个，所以我希望你这样做。

您会注意到我删除了thead 标记，并且要定义您的标题标题，您需要使用css 中的content 属性。 "\A" 和white-space: pre; 至关重要。

Answer 3

简单的基本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/

这适用于同时具有偶数和奇数行以及更多列的情况。