Repeat HTML table-footer on every printed page

Question

In my body i have a table element (like this below). When i want to print my html page, there should be the and content on every page. The header is working great but the footer is only showed at the last page. I have found many "solutions" for a problem like this but none worked

Adding or removing --style="display: table-footer-group"-- to the element does nothing.

It is imported to use only HTML and CSS

<table>
    <thead>
        <tr>
            <td colspan="5">
                <table style="width: 100%;">
                    <tr>                      
                        <td>Some Header Stuff</td>
                    </tr>                        
                </table>
            </td>
        </tr>
          <tr class="border_bottom">
              <td colspan="1" class="styledheader">header1</td>
              <td colspan="1" class="styledheader">header2</td>
              <td colspan="1" class="styledheader">header3</td>
              <td colspan="1" class="styledheader">header4</td>
              <td colspan="1" class="styledheader">header5</td>
          </tr>
    </thead>
       <tfoot>
            <tr class="border_top">
                <td colspan="1">Footer Left</td>
                <td colspan="4">Footer Right</td>
            </tr>
        </tfoot>
    <tbody>      
    <tr>
        <td>SomeText</td>
        <td>SomeText</td>
        <td>SomeText</td>
        <td>SomeText</td>
        <td>SomeText</td>
    </tr> 
    ---More rows
   </tbody>
</table>

--- Edit 12.05.2017 09:45 -- Changed code as creativename & daviddomain wrote

Changed

<td colspan="1" id="styledheader">header1</td>

to

<td colspan="1" class="styledheader">header1</td>

and made first "/tbody" to "tbody"

You have 2 closing `tbody` tags in your example, but no opening `tbody` tag. Also `id` needs to be unique. — DavidDomain, May 12 '17 at 07:29

score 5 · Accepted Answer · answered May 12 '17 at 16:27

5

You're probably using chrome. According to https://crbug.com/656232 (While table header prints in all pages, table footer only appears in last page) Edge and Firefox do what you want you want, but chrome support is in progress.

So, until chrome gets that bug fixed, use a different browser.

answered May 12 '17 at 16:27

dgrogan

2,587
1
17
21

This was fixed in chrome 62. If you find a page that exhibits this behavior in chrome 63+, please file a bug at http://crbug.com/new – dgrogan Jan 24 '18 at 16:46
I found that to get the footer to appear on all pages in Chrome 71, there must be a table header element, even if it's empty (``) – Charles L. Feb 16 '19 at 01:50
Created a bug: https://bugs.chromium.org/p/chromium/issues/detail?id=932849 – Charles L. Feb 16 '19 at 01:58

score 1 · Answer 2 · answered May 12 '17 at 07:37

1

You are not opening the tbody with the <tbody> tag. Also use classes instead of id's when using it more than once:

<td colspan="1" class="styledheader">header1</td>
<td colspan="1" class="styledheader">header2</td>

instead of

<td colspan="1" id="styledheader">header1</td>
<td colspan="1" id="styledheader">header2</td>

Don't forget to change the id selector to a class selector in your CSS

answered May 12 '17 at 07:37

creativename

304
2
16

made those small changes you suggested, but they had no impact - header is showing on every page - footer not – Schauby May 12 '17 at 07:52
@Schauby You want the `tfoot` to show above the `tbody` right? If yes, I dont think that this is possible without the use of CSS because `tfoot` is always shown AFTER `tbody` as far as I know. – creativename May 12 '17 at 08:14
No i want the `tfoot` below the `tbody` - My Problem is that the `tfoot` is only displayed at the end of the document and i want it at the end of every page – Schauby May 12 '17 at 08:40
I just realised that you have a Html-to-pdf tag in your question. Take a look at this answer: http://stackoverflow.com/a/35662608/5470690. – creativename May 12 '17 at 09:00

Repeat HTML table-footer on every printed page

2 Answers2