Repeating table header when splitting via column-count

问题

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/

回答1:

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.

回答2:

I'll admit this took a while, but it works. So as an alternative to potatopeelings's answer, I present this CSS monster:

#container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    
}
tbody tr:nth-child(7n+1) td{
    white-space: pre;
}
tbody tr:nth-child(7n+1) td:first-child:before {  
    content:"Header 1 \A";
}
tbody tr:nth-child(7n+1) td:last-child:before {  
    content:"Header 2 \A";
}
tbody tr:nth-child(7n+1) td:before { 
    background-color:red;
    height:20px;
    width:100%;
}

<div id="container">
<table id="tbl">
<tbody>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
    </tr>
    </tbody>
</table>    
</div>

This relies on several factors though.

Firstly, the current layout only works with 2 columns (it can work with more, just tweak a few things).

The main point: you need to have a defined maximum per column. Now I'm guessing you probably do have a maximum, however you did not specify one so I'm hoping you do.

You'll notice that I deleted the thead tags, and to define your header titles, you'll need to use the content property in the css. The "\A" and white-space: pre; are vital.

回答3:

Basic easy js solution

This works without having to change the existing HTML markup.

You can just copy the complete table, and display the copy next to it. Then iterate the TR elements and hide upper half elements in the first table and, and hide the lower half elements in the cloned table.

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

Working JSFiddle here: http://jsfiddle.net/J3VB5/90/

This works with having both even and odd number of rows, as well as more columns.

来源：https://stackoverflow.com/questions/28662576/repeating-table-header-when-splitting-via-column-count