# Plan comparison table

> A three-tier pricing and feature comparison layout: top header cards with plan names, prices, and conversion buttons, followed immediately by an aligned capability table. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/compare-plan-table.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: button, buttons, column, columns, group, heading, paragraph, table
Keywords: pricing, plans, compare, matrix, table, features, tiers

## Variations (2)

### Paper (the default)

Identical markup in every theme.

The plan comparison table on your base ground with your contrast text.

### Night plan table

Identical markup in every theme.

The band inverts to your contrast ground with base text.


---

## The signature moment: conversion header locked to feature matrix

**A header tier that asks, and a matrix that answers.** Three bordered plan cards carry the names, the monthly prices and the buttons; the capability matrix sits directly under them, so the decision and the evidence read as one block. The cards are thirds of the band and the table's columns size to their content, so the two tiers are stacked, not ruled into a single grid.

## What happens at 390px

The table states `hasFixedLayout: false`, so its columns size to their content
instead of being forced into equal fractions of the screen. `.wp-block-table` is
a WordPress core `overflow-x: auto` container, so once the columns need more
room than the phone has, the table becomes a horizontal rail inside its own
figure: the page never scrolls sideways, the table does, and every column stays
whole. Fixed layout would have shredded the words instead, because core sets
`word-break: break-word` on the cells of a fixed table. The `figcaption` says
the table scrolls, because a scroll container with no affordance is a silent
failure of its own. No CSS ships to buy any of this.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere.
- **Your colours.** `base` for ground, `contrast` for text, borders, and buttons.