# 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.

Canonical: https://patternpaste.com/pattern/table-wide-rail.html
Section: Tables
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: group, heading, paragraph, table
Keywords: table, matrix, regions, availability, wide, scroll, compare

## Variations (2)

### Paper (the default)

Identical markup in every theme.

The region matrix on your base ground with your contrast text.

### Night rail

Identical markup in every theme.

The band inverts to your contrast ground with base text.


---

## 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 happens at 390px

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 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 a buyer changes first

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.