Blog

Table and Print Styles: border-collapse, table-layout, Sticky Headers, Numeric Alignment, @media print and @page

For a data table, border-collapse: collapse, table-layout: fixed and text-align: end with tabular-nums for the money column are enough; draw the sticky header's line with box-shadow, and use @media print, @page and print-color-adjust for printing. The post measures Bookstore's My orders table and invoice in Chromium and WebKit, reads Chromium's page.pdf() output with pdf.js, and closes the series.