Skip to main content

How to prevent table headings duplicating when generating a PDF

· 2 min read

I needed to generate some reports from data we have.

So the first step was to create an HTML page from the data, and then generate a PDF from that HTML that we could send.

So firstly to generate the PDF from the HTML, I used the code in htmlToPdf.js below.

But I was noticing that the table headings would often duplicate themselves. In CSS you can use the @media rule to apply CSS based on the results of a media query. So essentially using

@media print

you can code up CSS that will be only be applied when printing documents. Example in print-media.html below.

The key line of code to prevent table headings duplicating is

thead {display: table-row-group;}

source on Stack Overflow

const puppeteer = require('puppeteer');

const htmlToPdf = async html => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(html);
const buffer = await page.pdf({
format: 'A4',
printBackground: true,
displayHeaderFooter: true

await browser.close();

return buffer;
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>${name} statement report</title>
.sunbowl-blue {
color: #87ceeb !important;
#scallops {
background-image: url('');
background-repeat: repeat-x;
height: 11px;

@media print {
table {
font-size: 0.85em;

p {
line-height: 1

small {
font-size: 0.65em;

thead {
display: table-row-group;

View this gist on GitHub