我正在 Magento 中输出产品列表,作为包装在表格中的简单列表。
由于此列表可能会很长(100 个以上产品),因此我使用了来自这里的想法 https://stackoverflow.com/questions/21001803/how-to-have-one-html-table-split-into-two-sections-side-by-side自动将表格分成两部分,以帮助提高可读性等。
#container {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
但是,此方法只是将表分成 2 列。有谁知道如何让表标题在第二列中重复?
使用链接的答案,您可以看到这个小提琴,它显示了我所在的位置:http://jsfiddle.net/J3VB5/51/ http://jsfiddle.net/J3VB5/51/
额外的标记 + 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/uqz76rL1/摆弄一个长标题 -http://jsfiddle.net/3343Lg4x/ http://jsfiddle.net/3343Lg4x/
但是,如果您的 td 内容是驱动表格布局的内容,那么它就不起作用,从这个小提琴中可以明显看出 -http://jsfiddle.net/kezztx55/ http://jsfiddle.net/kezztx55/
因此,如果您有固定的表格布局(或者如果您可以在 container1 中放入一个虚拟行,其中包含驱动列宽的内容),那么它将起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)