Create a print-ready invoice

Structure an invoice for readable screen, print, and PDF output with controlled page breaks.

MediumHTML/CSS Print Layout

50 min0% acceptance

Description

Build a complete semantic invoice with seller and customer addresses, invoice metadata, a captioned line-item table, totals, and screen-only controls. Add print CSS that removes application chrome, preserves legibility, repeats table headings, avoids breaking important rows and totals, and uses sensible printed-page margins.

Requirements

Use a main region and a labelled invoice article with a single descriptive h1.
Represent seller and bill-to contact details in separately labelled address elements.
Use a captioned table with semantic headers for description, quantity, rate, and amount.
Expose subtotal, tax, and total as labelled values, with the total visually and semantically prominent.
Define @media print rules and printed-page margins with @page.
Hide .screen-controls and unrelated navigation in print without hiding invoice content.
Avoid breaking line-item rows, address blocks, and the complete totals summary across pages.
Use high-contrast print colors, readable physical sizing, and repeating table headers.

Printed output

Input

Print the invoice from a page that includes navigation and a Print invoice button

Expected output

Only the invoice prints with page margins and readable black text

Explanation

Application controls are useful on screen but not part of the document.

Long invoice

Input

Enough line items to span two pages

Expected output

Table headings repeat and no item or totals block is split awkwardly

Explanation

Print fragmentation rules protect meaningful units.

Constraints

Do not render the invoice as an image
Keep monetary values as selectable text
Do not depend on JavaScript for print layout

Hints

Hint 1

Start with semantic screen markup; most of it should remain valid for print unchanged.

Hint 2

Use break-inside and legacy page-break-inside fallbacks on indivisible blocks.

Hint 3

Let the table header group repeat naturally instead of recreating headings per page.

HTMLprint CSSinvoices