css 通过column-count拆分时重复表头

ufj5ltwl  于 2022-11-19  发布在  其他
关注(0)|答案(4)|浏览(140)

我在Magento中输出一个产品列表,作为一个简单的列表 Package 在一个表中。
由于这个列表可能会很长(超过100个产品),我使用了ideas from here自动将表一分为二,以帮助提高可读性等。

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

但是,这个方法只是将表格流成2列。有人知道我如何让表格标题也在第二列中重复吗?
使用链接的答案,你可以看到这个小提琴,它显示了我在哪里:http://jsfiddle.net/J3VB5/51/

owfi6suc

owfi6suc1#

额外的标记+ 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。它工作得很好,即使与长标题内容。
小提琴-http://jsfiddle.net/uqz76rL1/长头小提琴-http://jsfiddle.net/3343Lg4x/
然而,如果td内容是驱动表格布局的内容,则它将不起作用,这一点从http://jsfiddle.net/kezztx55/中可以明显看出
因此,如果您有一个固定的表布局(或者如果您可以在container 1中放入一个虚拟行,其中包含驱动列宽的内容),它将工作。

ui7jx7zq

ui7jx7zq2#

我承认这花了一段时间,但它起作用了。因此,作为potatopeelings的答案的替代,我提出这个CSS怪物:
第一个
这取决于几个因素。
首先,目前的布局只适用于2列(它可以适用于更多,只是调整了一些东西)。
要点:您需要为每列定义一个最大值。现在我猜您可能有一个最大值,但是您没有指定,所以我希望您有。
您会注意到我删除了thead标记,为了定义标题,您需要使用css中的content属性,“\A”和white-space: pre;是至关重要的。

zxlwwiss

zxlwwiss3#

基本的简易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/
这适用于具有偶数和奇数行以及更多列的情况。

h9a6wy2h

h9a6wy2h4#

在Chrome上做了一些实验后,我发现你可以通过在样式中添加break-inside: avoid;来重复<thead />(https://codereview.chromium.org/2021703002/#ps20001)。显然,打印媒体类型依赖于此属性在每个页面上重复<thead />

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

}

#tbl thead {
    break-inside: avoid;
}

http://jsfiddle.net/dusxnzLb/
然而,似乎<thead />仅在column-count ≤4时重复。
这个技巧在Firefox(column-count doesn't break tables properly)或Safari(<thead /> doesn't repeat even in print mode)上不起作用。

相关问题