Summary - Printable report

CSS course · Advanced · Lesson 42/52

Build a printable report page with print styles.

Summary: Printable report

In this summary you will assemble all the pieces of a printable report page. Three pillars: @page for size and margin, @media print for print-only styles, break-inside for blocks that must not split.

The report skips the ad banner when printed, keeps tables whole, and pins the paper to A4. You will add each piece in turn.

Exercise Build the report skeleton

Write an @page declaration. Set size: A4, margin: 2cm. Also show the page number in a @bottom-center box via content: counter(page). Place everything inside the same @page block.

Show example solution

/* report page skeleton */
@page {
  size: A4;
  margin: 2cm;
  @bottom-center {
    content: counter(page);
  }
}

The report's print styles

Once the skeleton is in place, you add two refinements inside an @media print block. Drop the ad banner with display: none; keep the invoice table whole with break-inside: avoid.

The reader sees no ad on paper, and the table does not split mid-page. On screen, the report still shows every element.

Exercise Hide the ad, keep the table whole

Write an @media print block. Inside it, declare display: none for .ad-banner and break-inside: avoid for .invoice-table. Both selectors must sit inside the @media print block.

Show example solution

/* print styles */
@media print {
  .ad-banner {
    display: none;
  }
  .invoice-table {
    break-inside: avoid;
  }
}

Test yourself

Which option hides the ad only when printing?
- @page { .ad { display: none; } }
- @media print { .ad { display: none; } }
- .ad { break-inside: avoid; }
- @page { size: A4; }
Show answer

@media print { .ad { display: none; } } — Correct. display: none inside @media print hides the ad only in print.

Keep the summary box whole

@media print {
  .summary-box {
    ____;
  }
}

Show answer

@media print {
  .summary-box {
    break-inside: avoid;
  }
}

All lessons in Advanced

Summary - Printable report