v132 · css

Compact Table

Wide comparison tables with many columns waste space on horizontal column headers. writing-mode: sideways-rl rotates headers to read bottom-to-top while keeping Latin characters upright — unlike vertical-rl which turns each letter 90°. Toggle the writing mode to see the space and legibility difference.

Feature detection: checking…
column header writing-mode: text reads bottom-to-top, characters upright
CSS writing-mode feature support — 12 columns, vertical headers
Feature sideways-rl sideways-lr vertical-rl vertical-lr horizontal-tb text-orientation overflow-inline overflow-block writing-mode: initial inline-size block-size margin-inline
Chrome 132+This browser ✓✓✓✓ ✓✓✓✓ ✓✓✓✓
Chrome 131Previous stable ✗✗✓✓ ✓✓✓✓ ✓✓✓✓
Firefox 127+Gecko ✓✓✓✓ ✓✓✓✓ ✓✓✓✓
Safari 16.4+WebKit ✓✓✓✓ ✓✓~~ ✓✓✓✓
Applies to flexflex items rotate ✓✓✓✓ ✓——— ————
Latin text uprightcharacters not rotated ✓✓✗✗ ✓——— ————

Horizontal vs sideways-rl — same table, different header approach

writing-mode: horizontal-tb (default)
Feature sideways-rl sideways-lr vertical-rl
Chrome 132✓✓✓
Firefox✓✓✓
Safari✓✓✓
Each column header needs ~7rem minimum width to fit the text horizontally. With 12 columns the table is very wide.
writing-mode: sideways-rl (Chrome 132+)
Feature sideways-rl sideways-lr vertical-rl
Chrome 132✓✓✓
Firefox✓✓✓
Safari✓✓✓
Each column header is ~2rem wide. 12 columns fit comfortably in the same space as 3 horizontal ones. 
/* The key rule — applied to the <th> inner wrapper */
.col-header-inner {
  writing-mode: sideways-rl;  /* Chrome 132+ */
  white-space: nowrap;
  display: block;
  min-height: 5rem;
}

/*
  sideways-rl vs vertical-rl for Latin text:
  - vertical-rl:   each letter rotated 90° clockwise (hard to read)
  - sideways-rl:   whole line rotated, letters stay upright (natural)

  sideways-rl reads bottom-to-top.
  sideways-lr reads top-to-bottom (left column bias).
*/

/* Column header cell — fixed narrow width */
.col-header {
  width: 2.8rem;
  max-width: 2.8rem;
  vertical-align: middle;
}

see also