Where pages break / thead
How to repeat table headers on every PDF page
Rows inside a thead element repeat at the top of every page the table runs onto. This is markup, not CSS: there is no property that creates the behaviour.
What it is for
A long table without repeated headers is unreadable from page two onward, and this is the only mechanism that produces them.
Support: Works everywhere
Works in browser engines and print engines, and has for a very long time. tfoot repeats at the bottom in the same way.
The syntax
Written the way it would appear in a document stylesheet, using thead as intended.
<table>
<thead>
<tr><th scope="col">Date</th><th scope="col">Description</th><th scope="col">Amount</th></tr>
</thead>
<tbody>
<!-- Rows. thead repeats above them on every page. -->
</tbody>
</table>The mistake people make
display: block on thead or tr, which responsive table stylesheets apply routinely. It removes the table structure the repetition depends on, so the header stops repeating and nothing explains why.
Frequently asked
Does thead work when generating a PDF?
Works everywhere. Works in browser engines and print engines, and has for a very long time. tfoot repeats at the bottom in the same way.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to stop an element splitting across PDF pages
break-inside. Works everywhere.
How to force a page break before an element in a PDF
break-before. Works everywhere.
How to keep a heading with the text that follows it
break-after. Works everywhere.
page-break-inside vs break-inside: which should I use
page-break-inside. Works everywhere.
How to stop single lines being stranded across PDF pages
orphans and widows. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.