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

解决方案无疑是hacky。即使标题内容很长，它也能很好地工作。

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

然而，如果您的td内容正在推动桌面布局，那么它将无法工作，这一点从这个小提琴中可以看出 - http://jsfiddle.net/kezztx55/

因此，如果你有一个固定的表格布局（或者如果你可以在容器1中放入一个包含驱动你的列宽的内容的虚拟行）它就可以工作。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

这取决于几个因素。

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

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

您会注意到我删除了thead标记，并且要定义标题标题，您需要在css中使用content属性。＆＃34; \ A＆＃34;而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/

这适用于偶数行和奇数行，以及更多列。

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

3 个答案: