0

Here's my question. It is similar to a few I saw here (ie. CSS: Repeat Table Header after Page Break (Print View)), but there is one difference: multiple headers.

How do you show the current table header where the pagepbreak (in print preview mode) is occuring after the break in a dynamic table?

So, if this is my table and the page break occurs after the second header...

<table>
    <tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr>
    <tr><td>Cell 1a</td><td>Cell 2a</td><td>Cell 3a</td></tr>
    <tr><td>Cell 4a</td><td>Cell 5a</td><td>Cell 6a</td></tr>   

    <tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr>
    <tr><td>Cell 1b</td><td>Cell 2b</td><td>Cell 3b</td></tr>

    <!--PAGE BREAK HERE ON PRINT PREVIEW-->
    <tr><td>Cell 4b</td><td>Cell 5b</td><td>Cell 6b</td></tr>
</table>

...I want to be able to show the second header (Head Cells 1b, 2b, & 3b) as the headers after the page break. In other words I want to show the corresponding headers after the pagebreak occurs no matter where it occurs. So the above table should look like this after the page break...

<table>
    <tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr>
    <tr><td>Cell 1a</td><td>Cell 2a</td><td>Cell 3a</td></tr>
    <tr><td>Cell 4a</td><td>Cell 5a</td><td>Cell 6a</td></tr>   

    <tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr>
    <tr><td>Cell 1b</td><td>Cell 2b</td><td>Cell 3b</td></tr>

    <!--PAGE BREAK HERE ON PRINT PREVIEW-->
    <tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr>
    <tr><td>Cell 4b</td><td>Cell 5b</td><td>Cell 6b</td></tr>
</table>

I have tried wrapping the headers in <thead> tags, and then setting my css to:

table, tr{page-break-after:auto;} 
thead {display:table-header-group;}

but the first header keeps repeating itself on every page, so what I am seeing is this:

<table>
    <thead><tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr></thead>
    <tr><td>Cell 1a</td><td>Cell 2a</td><td>Cell 3a</td></tr>
    <tr><td>Cell 4a</td><td>Cell 5a</td><td>Cell 6a</td></tr>   

    <thead><tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr></thead>
    <tr><td>Cell 1b</td><td>Cell 2b</td><td>Cell 3b</td></tr>

    <!--PAGE BREAK HERE ON PRINT PREVIEW-->
    <thead><tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr></thead>
    <tr><td>Cell 4b</td><td>Cell 5b</td><td>Cell 6b</td></tr>
</table>

Please if there's anybody out there that can help with this issue, let me know ASAP. I'd really appreciate it!

Thanks in advance!

Community
  • 1
  • 1
Dariel Saldana
  • 1
  • 3

1 Answers1

0

First of all there can't be multiple <thead> tags in one table. So what I had to do was make each section an actaul table with it's own <thead>. Now the correct header is displayed after the pagebreak.

Dariel Saldana
  • 1
  • 3