CSS page-break-inside Property

What You’ll Learn

The page-break-inside property controls page breaks inside an element when a document is printed. It is especially useful for keeping tables, images, and other blocks together on one page.

Introduction

The page-break-inside property in CSS is used to control the behavior of page breaks inside an element when printing a document.

This property is particularly useful for ensuring that content such as tables or images are not split across pages, providing a more readable printed document.

Definition and Usage

Apply page-break-inside: avoid to block-level elements when you want the browser to keep the entire element on one printed page if possible. This is a common pattern for tables, figures, cards, and summary boxes in reports.

Like other print properties, page-break-inside usually has little or no visible effect on a normal scrolling screen layout. Test your rules in the browser’s print preview to see the real result.

📝 Syntax

The syntax for the page-break-inside property is simple and can be applied to any block-level element.

element {
  page-break-inside: value;
}

Basic Example

table {
  page-break-inside: avoid;
}

Syntax Rules

• Apply page-break-inside to block-level elements such as headings, sections, and divs.
• The value is a keyword: auto or avoid.
• avoid is the most useful value for keeping tables and figures intact when printing.
• The property is not inherited — set it on the element you want to keep together.
• Use inside @media print when you only want breaks when printing.
• For new projects, consider the modern break-inside property as a replacement.

🎯 Default Value

The default value of the page-break-inside property is auto. This means the browser may automatically insert page breaks inside the element as needed.

💎 Property Values

The page-break-inside property accepts keyword values that control whether page breaks are allowed inside an element when printing.

When Does page-break-inside Matter?

page-break-inside only affects paginated output. These are the most common use cases:

• Tables — Use page-break-inside: avoid so rows are not split across two printed pages.
• Figures and images — Keep an image and its caption together on one page.
• Cards and callouts — Prevent summary boxes from breaking in the middle.
• Readable grouping — Use avoid on any block that should read as one unit when printed.

On a normal scrolling web page, you may not see any effect — that is normal. Test in print preview to verify behavior.

Examples Gallery

Start with the reference table example, keep cards and figures together, and apply print-only avoid rules.

<style>
  table {
    page-break-inside: avoid;
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>

<h1>Table with Page Break Avoidance</h1>
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
</table>

<style>
  .report-card {
    page-break-inside: avoid;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
  }
</style>

<section class="report-card">
  <h2>Summary</h2>
  <p>This card should stay together on one printed page.</p>
</section>

<style>
  figure {
    page-break-inside: avoid;
  }
</style>

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Figure 1: Quarterly sales</figcaption>
</figure>

@media print {
  table,
  figure,
  .keep-together {
    page-break-inside: avoid;
  }
}

page-break-inside vs break-inside

page-break-inside is the legacy print property. The modern replacement is break-inside, which also supports column and region breaks.

In legacy stylesheets, page-break-inside: avoid is equivalent to break-inside: avoid. When writing new CSS, prefer break-inside for better long-term support.

/* Legacy */
table {
  page-break-inside: avoid;
}

/* Modern equivalent */
table {
  break-inside: avoid;
}

💡 Best Practices