Css 通过列计数拆分时重复表标题

我在Magento中输出产品列表，作为包装在表中的简单列表

由于此列表可能会很长（100种以上产品），因此我使用了 自动将表格一分为二，以帮助提高可读性等

    #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">
     ...

无可否认，这个解决方案很老套。它甚至可以很好地处理长标题内容

小提琴- 摆弄一个长头-

但是，如果你的td内容是驱动表格布局的因素，那么它将不起作用，从这把小提琴中可以明显看出-

---

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

我承认这需要一段时间，但它起作用。因此，作为potatopeelings答案的另一种选择，我提出了这个CSS怪物：

#容器{
列数：2；
-moz列数：2；
-webkit列数：2；
}
t车身tr:n第n个子（7n+1）td{
空白：预处理；
}
tbody tr:n第n个子（7n+1）td:first child:before{
内容：“标题1\A”；
}
tbody tr:n第n个子（7n+1）td:最后一个子：在{
内容：“标题2\A”；
}
tbody tr:n第n个子（7n+1）td:before{
背景色：红色；
高度：20px；
宽度：100%；
}

aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb
aaaa
bbbb

简易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";
    }
}

var myDiv=document.getElementById（“容器”）；
var myTable=document.getElementById（“tbl”）；
var newTable=document.createElement（“表”）；
myDiv.appendChild（新表）；
setAttribute（“id”，“newTable”）；
newTable.innerHTML=myTable.innerHTML；
var rows=myTable.getElementsByTagName（“tr”）；
var rowsCopy=newTable.getElementsByTagName（“tr”）；
//从1开始，而不是从0开始，因为第一行是标题
对于（变量i=1；i（行长度/2））
{
行[i].style.display=“无”；
}否则
{
RowScope[i].style.display=“无”；
}
}

在这里工作：

---

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

请参见-您的操作犯了一个简单的错误。不过你喜欢这个主意！你指的是左右的顺序？不会认为这是一个错误，因为它没有被询问，css仍然可以调整它…但是用biger-than-if（i>（rows.length/2））替换small-than来修复它；）我觉得很明显，你希望你的桌子从左到右。你不看从右到左的专栏，或者博客文章，是吗？看起来很完美-我会再等一天，如果没有更好的答案出现，我会把奖金奖励给你：-）。嗨，伙计们，对不起-好像是在我写了之后的某个时候被问到的！！我看看能否尽快测试你的解决方案。但如果其他人证明它有效——那么是的，赏金给你！：）这似乎是一个设计问题，而不是技术问题。您可能应该为自己准备一个包罗万象的标题，而不是使用backflip来绕过

列

惯例。

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

.dummy > th > span {
    display: block;
    height: 0;
    opacity: 0;
}

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