Repeating table header when splitting via column-count
css, css-tables, magento
Solution
Would an extra markup + CSS solution help?
Duplicate your header (with repeated columns) right above your current container.
<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">
...
Hide the actual header in your table with 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;
}
The solution is admittedly hacky. It works pretty well even with long header content.
Fiddle - http://jsfiddle.net/uqz76rL1/ Fiddle with a long header - http://jsfiddle.net/3343Lg4x/
However it will NOT work if your td content is what is driving the table layout as is obvious from this fiddle - http://jsfiddle.net/kezztx55/
So, if you have a fixed table layout (or if you can put in a dummy row in container1 containing the content that drives your column width) it will work.
Problem
I am outputting a list of products in Magento, as a simple list wrapped in a table. As this list can get quite long (100 products+), I've used the ideas from here to automatically split the table into two, to help with readability etc. ``` #container { column-count:2; -moz-column-count:2; -webkit-column-count:2; } ``` However, this method just flows the table into 2 columns. Does anyone know how I can get the table header to also repeat in the second column? Using the linked answer, you can see this fiddle which shows where I am at: http://jsfiddle.net/J3VB5/51/