# HTML Table Cut Off or Split Across Pages When Printing to PDF — the CSS Fixes

Canonical: https://commareports.com/fix/html-table-split-across-pdf-pages
Published: 2026-10-02

> Rows sliced in half at the page break, headers missing on page two, the right-hand columns cut off. What causes each when you print an HTML report or save it as PDF, and the print CSS that fixes it.

# HTML table split across PDF pages

Long tables are where print-to-PDF falls apart. A row gets sliced
through the middle at the page edge, page two starts with numbers and no
column names, and the last three columns are simply gone.

Each of those has a different cause. All of them are fixable in a
handful of lines of print CSS.

## Rows cut in half at the page break

**Cause:** by default the browser breaks wherever the page ends, even
mid-row.

**Fix:**

```css
@media print {
  tr,
  img,
  figure,
  .card {
    break-inside: avoid;
    page-break-inside: avoid; /* older engines */
  }
}
```

Rows that would straddle the break move to the next page. The limit: a
single row taller than a page — a cell with a long stack trace, say —
will always split. Truncate or wrap those cells for print.

## Headers missing after page one

**Cause:** the header row isn't in a `<thead>`.

Browsers repeat `<thead>` at the top of every printed page when a table
breaks. Many generated reports put the header in the first `<tr>` of
`<tbody>`, or fake it with divs, so it prints once.

```html
<table>
  <thead>
    <tr>
      <th>Test</th>
      <th>Status</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>
```

A `<tfoot>` repeats the same way at the bottom, which is handy for
running totals.

## Right-hand columns cut off

**Cause:** the table is wider than the printable area. On screen it
scrolled sideways; paper doesn't scroll.

Fixes, roughly in order of how much they change the report:

```css
@page {
  size: A4 landscape; /* or: letter landscape */
  margin: 10mm;
}

@media print {
  table {
    width: 100%;
    table-layout: fixed;
    font-size: 9pt;
  }
  td,
  th {
    overflow-wrap: anywhere; /* lets long IDs and URLs wrap */
  }
  .screen-only {
    display: none;
  }
}
```

Landscape alone usually rescues an eight-to-ten-column table. Beyond
that, decide which columns belong on paper and hide the rest with a
class.

## Only the first screenful of rows prints

**Cause:** the table sits in a scroll container — `max-height: 600px;
overflow: auto` — and print shows exactly what that box shows.

```css
@media print {
  .table-wrapper {
    max-height: none;
    height: auto;
    overflow: visible;
  }
}
```

Same story for tabs and collapsed `<details>`: print captures the
current state. And if the table lives inside a `display: flex` or
`display: grid` parent, set that parent to `display: block` in print;
some engines won't break flex and grid children across pages cleanly.

## The sticky header that prints over every page

A `position: sticky` or `position: fixed` header or toolbar can repeat
on every page and sit on top of the first rows. Hide app chrome in
print:

```css
@media print {
  header,
  nav,
  .toolbar {
    display: none;
  }
}
```

## Do all of it without touching the file

The free [HTML to PDF tool](/tools/html-to-pdf) takes pasted HTML and
injects the parts above for you: page size and orientation, margins,
`break-inside: avoid` on rows and figures, background colors kept, and
a field for CSS selectors to hide. Preview, then save from the print
dialog. It runs entirely in your browser.

Colors vanishing too? That's a separate default — see [background
colors missing when printing](/fix/html-print-backgrounds-missing).

## Or send the table, not a picture of it

The reason long tables print badly is that they were never meant for
paper: they scroll, sort and filter. A PDF freezes them at whatever
page size the reader's printer picked.

If the PDF is just the delivery mechanism, [publish the report to
Comma](https://commareports.com/new) and send the link instead. The
table keeps its scroll and its sorting, the link always shows the
latest run, and reviewers [comment on the exact
row](/comment-on-html) instead of circling it on page 7.

## Try it

**[Publish a report →](https://commareports.com/)**

### Related

- [HTML to PDF converter](/tools/html-to-pdf)
- [HTML table to CSV](/tools/html-table-to-csv) — when they actually wanted the data
- [Background colors missing when printing](/fix/html-print-backgrounds-missing)
- [The report is tiny on a phone](/fix/html-report-tiny-on-phone)
- [Email an HTML report](/email-html-report)