[Library] Compare and tables

Catalogue accessStandard

Wide region rail

A six-region availability matrix set wider than the measure that introduces it: the heading holds a 32rem column while the table breaks out to the wide width and scrolls sideways in WordPress's own table scroller on a narrow screen. States no colour and no font of its own.

Variation View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A six-region availability matrix: one row per service, one column per region, introduced by a heading that deliberately does not run as wide as the data.

The signature moment

The table runs past its own measure

The eyebrow, heading and lede are held in a 32rem column at the left. The table breaks out to the wide width beside them, so the section reads as a narrow statement with a wide instrument under it. That is the asymmetry; nothing is decorated to get it.

The second half of the signature is what happens when the instrument stops fitting. The table states hasFixedLayout: false, so its columns size to their content instead of being forced equal, and .wp-block-table is a WordPress core overflow-x: auto container. Below roughly 900px the table is wider than the page and the buyer swipes it sideways, with every column intact. It never shreds a word to fit, which is what table-layout: fixed and its word-break: break-word do on a phone.

No CSS ships to buy that. It is core's own stylesheet, and the only decision the pattern makes is to stop opting out of it.

What it inherits from your theme

  • The typeface. No font family is stated anywhere.
  • Your colours. base for the ground, contrast for text; the closing rule and every table border are currentColor, so they follow whatever your theme paints text in.
  • The wide width. The table takes align: wide, so how far past the measure it runs is your theme's wideSize, not ours.
What happens at 390px92 words

The heading column and the lede stack as normal. The table becomes a horizontal rail inside its own figure: the page does not scroll sideways, the table does. The note under the rule says so in words, because a scroll container with no affordance is a silent failure of its own. It is an ordinary paragraph and not the table block's figcaption, for a measured reason: Twenty Twenty-Four sizes a caption at 0.8em, which lands at 12.8px, under the catalogue's 14px floor, and a pattern ships no CSS with which to argue.

What a buyer changes first35 words

The region columns. Add or remove a <th> in the head and the matching <td> in every row; the layout has no column count in it, and a seventh region simply makes the rail longer.

Back to the library