1

I have a really long table that when printed, spans several pages.

Currently, when printing the table, the header row only appears at the very top of the table and not at the top of each page.

How can I make the browser (specifically chrome) print a "sticky" table header at the top of every printed page?

My html:

<table>
  <!--header-->
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td>Col 4</td>
  </tr>

  <!--body-->
  <tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  . . . . . .
  <tr>
    <td>Row nth</td>
    <td>Row nth</td>
    <td>Row nth</td>
    <td>Row nth</td>
  </tr>
</table>
Wesley Smith
  • 19,401
  • 22
  • 85
  • 133
nzrnfourtwenty
  • 135
  • 10
  • are you saying that you have a really long table that when printed, spans several pages and you would like to print a "sticky" header for the table at the top of every printed page? – Wesley Smith Oct 18 '16 at 03:27
  • 1
    Possible duplicate of [Having Google Chrome repeat table headers on printed pages](http://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed-pages) – Bryce Oct 18 '16 at 03:28
  • yes exactly @DelightedD0D .............. – nzrnfourtwenty Oct 18 '16 at 03:29
  • I don't know why some one is down vote me – Kushan Oct 18 '16 at 03:45
  • @Kushan I downvoted you, but to be fair, when I did so, your answer was wrong and didnt really do anything different except to use `th`. You have since changed it to incorporate the correct answer and I have removed the downvote :) – Wesley Smith Oct 18 '16 at 03:49

1 Answers1

1

To make this work properly, just make sure you are using the <thead> and <tbody> tags in your html like the below. With those elements in place, every major browser I know of will know how to handle the page breaks automatically:

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>

    ....

  </tbody>
</table>

enter image description here

Wesley Smith
  • 19,401
  • 22
  • 85
  • 133
  • @nzrnfourtwenty yep, that screenshot is from chrome. Is this not working on your machine? If not, what version of chrome are you running and on what operating system? – Wesley Smith Oct 18 '16 at 06:52
  • @nzrnfourtwenty can you make a [jsfiddle](https://jsfiddle.net/) and show me your actual html? – Wesley Smith Oct 18 '16 at 06:54