egg*_*egg 7 css magento css-tables
我正在输出Magento中的产品列表,作为一个包含在表格中的简单列表.
由于这个列表可以很长(100个产品+),我使用了这里的想法 自动将表分成两个,以帮助提高可读性等.
#container {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
Run Code Online (Sandbox Code Playgroud)
但是,此方法只是将表格分成两列.有谁知道如何让表头也在第二列重复?
使用链接的答案,你可以看到这个小提琴,显示我在哪里: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">
...
Run Code Online (Sandbox Code Playgroud)
使用 CSS 技巧隐藏表格中的实际标题
<table id="tbl">
<thead>
<tr class="dummy">
<th><span>header1</span></th>
<th><span>header2</span></th>
</tr>
...
Run Code Online (Sandbox Code Playgroud)
CSS
#container1, #container {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
.dummy > th > span {
display: block;
height: 0;
opacity: 0;
}
Run Code Online (Sandbox Code Playgroud)
无可否认,这个解决方案是很hacky的。即使标题内容很长,它也能很好地工作。
小提琴 - http://jsfiddle.net/uqz76rL1/ 小提琴 - http://jsfiddle.net/3343Lg4x/
但是,如果您的 td 内容是驱动表格布局的内容,那么它就不起作用,从这个小提琴中可以明显看出 - http://jsfiddle.net/kezztx55/
因此,如果您有固定的表格布局(或者如果您可以在 container1 中放入一个虚拟行,其中包含驱动列宽的内容),那么它将起作用。