CourtBouillon

Authentic people growing open source code with taste

CSS Tricks: @page

Ever wanted to use a landscape orientation for your tables, because they’re too large and overflow the page? It’s possible with CSS named pages!

@page landscape {
  size: A4 landscape;
}

table {
  page: landscape;
}

With this example, you have your normal content on portrait pages and tables on landscape pages. You can of course change the selector to target specific tables or other elements that may be too large.

First page with portrait orientation
First page with the default orientation
Second page with landscape orientation
Second page containing table with landscape orientation

This feature can be used in various cases, each time you need different page sizes depending on your content. It’s often used as a smart solution to avoid some ugly content overflows.

You can also define different page names with different formats if needed, these pages can have different margin sizes, margin contents, layouts and backgrounds. That’s useful to create dedicated pages for chapter titles, with a layout that is totally different from the main text. That’s also a nice way to put some content on the last page of a book or a magazine.

Page selectors are another way to select first, left, right and blank pages. Don’t hesitate to mix these page selectors with named pages to finely define the structure of your document!

Learn more about named pages: