Print-Friendly Table Styles

Technical Deep Dive & Specifications

The @media print Context & @page Rules

Print stylesheets are scoped inside the @media print media block or linked via a separate stylesheet:

<link rel="stylesheet" href="print.css" media="print">

@page {
  size: A4 portrait; /* or 'letter portrait', 'A4 landscape' */
  margin: 1.5cm 1.2cm; /* Physical margins on paper */
}

Page-Break & Fragmentation Controls

To prevent awkward page slices across table rows, the CSS Fragmentation Module Level 3 provides modern break-* properties alongside legacy page-break-* fallbacks:

@media print {
  /* Prevent table rows from splitting across two pages */
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Force a clean page break before a new major section table */
  .page-break-before {
    break-before: page;
    page-break-before: always;
  }

  /* Prevent headings and captions from separating from the table */
  caption, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
}

+-------------------------------------------------------------------------------+
|                       CSS FRAGMENTATION PROPERTY MATRIX                       |
+-------------------------------------------------------------------------------+
| Modern CSS (Level 3)     | Legacy Fallback (CSS 2.1) | Function               |
+--------------------------+---------------------------+------------------------+
| break-inside: avoid;     | page-break-inside: avoid; | Keeps <tr> intact      |
| break-before: page;      | page-break-before: always;| Starts table on new page|
| break-after: avoid;      | page-break-after: avoid;  | Glues header to table  |
+-------------------------------------------------------------------------------+

Repeating <thead> and <tfoot> Across Physical Pages

Standard web browser rendering engines (Chromium, Gecko, WebKit) have a built-in feature: if a table's height exceeds a physical page, the engine automatically duplicates <thead> at the top of every subsequent page, and <tfoot> at the bottom of the final page.

The Fragile Rule: Do NOT Alter Display Types!

If your screen stylesheet declares display: block or display: flex on <table>, <thead>, or <tr> (often done for mobile responsiveness), the print engine's native pagination logic will be broken.

Inside @media print, you must restore native table semantics:

@media print {
  table { display: table !important; }
  thead { display: table-header-group !important; }
  tbody { display: table-row-group !important; }
  tfoot { display: table-footer-group !important; }
  tr    { display: table-row !important; }
  th, td { display: table-cell !important; }
}

Ink Conservation & High-Contrast Print Normalization

1. Invert Dark Mode: Strip out all dark backgrounds and reset text to pure #000000 on #ffffff.
2. Remove Non-Essential Backgrounds: Strip out zebra striping, drop shadows, and heavy gradients to conserve printer toner and eliminate smudging.
3. Hide Interactive Controls: Eliminate search bars, pagination buttons, and action links ([Edit], [Delete], checkboxes).
4. Reveal Hyperlink Targets: Use CSS content: " (" attr(href) ")" so printed readers can see reference URLs.

@media print {
  /* Expand links into readable footnotes on paper */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #475569;
  }
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 72–75 (@page): Specifies the physical paper format (letter portrait) and sets 1.5cm physical paper margins.
• Line 89–93 (.screen-controls, .btn-print): Uses display: none !important; to hide print buttons, search filters, and interactive elements from the paper output.
• Line 101–103 (thead { display: table-header-group !important; }): Enforces native table-header-group behavior so that multi-page tables automatically repeat the header row at the top of every physical page.
• Line 124–127 (tr { break-inside: avoid; }): Prevents rows from being chopped in half horizontally across physical page boundaries.
• Line 130–134 (.doc-link::after): Uses CSS pseudo-elements to expand hyperlinks into printed text brackets [https://...], ensuring printed readers don't lose web references.

Expected Browser Render Output

[ON COMPUTER SCREEN]
+------------------------------------------------------------------------------------+
| Quarterly Financial Audit Report                 [🖨️ Print / Save PDF]             |
+------------------------------------------------------------------------------------+
| Transaction ID | Department         | Reference Doc          | Authorized Amount   | (Dark Header)
+----------------+--------------------+------------------------+---------------------+
| TX-9901        | Cloud Operations   | SOC2-Compliance-Doc    | $42,500.00          | (Zebra Striped)
+----------------+--------------------+------------------------+---------------------+

[ON PHYSICAL PRINTED PAPER / PDF]
Quarterly Financial Audit Report
Generated on August 21, 2026

+------------------------------------------------------------------------------------+
| Transaction ID | Department         | Reference Documentation       | Amount       | (Clean Light Gray)
+----------------+--------------------+-------------------------------+--------------+
| TX-9901        | Cloud Operations   | SOC2-Compliance-Doc           | $42,500.00   | (Pure White Ink Saver)
|                |                    | [https://internal.ops/audit/9901]             |
+----------------+--------------------+-------------------------------+--------------+
| TOTAL QUARTERLY EXPENDITURE:                                        | $68,150.00   |
+------------------------------------------------------------------------------------+
*(No print buttons, no shadows, rows never slice across page breaks, thead repeats on page 2)*