13 Tailwind CSS Tables

Demo 01 does it with display utilities, and Tailwind's md: prefix is the query. On mobile the <table>, <thead>, <tbody>, <tr> and <td> are all set to block, the header row is visually hidden, and each cell prints its own label with before:content-[attr(data-label)] reading a data-label attribute. At the md breakpoint you flip everything back with md:table, md:table-row and md:table-cell, and re-hide the pseudo-labels. The common bug is forgetting to hide that before: label at md, so every desktop cell shows its column name twice. Keep the real <thead> in the markup even while it's visually hidden — screen readers still rely on it to associate each stacked value with its column.

Demo 02 keeps it pure CSS: one visually hidden <input type=checkbox> marked peer drives the swap. Each tier holds two price nodes — the monthly figure is visible and carries peer-checked:hidden, the annual figure starts hidden and appears with peer-checked:inline. The sliding knob reads the same peer via peer-checked:translate-x-full. Wrap the track in a <label> so the whole switch is clickable, and keep the checkbox in the DOM with sr-only rather than display:none, so it still takes focus and the space bar toggles it. The usual mistake: putting the price spans outside the peer's later-sibling scope. peer-checked: can only style elements that come after the peer inside the same parent, so if a price sits before the checkbox the toggle silently does nothing.

Both Demo 03 and Demo 13 pin the header with sticky top-0, but placement is the catch. position: sticky on a <thead> or <tr> is unreliable across engines, so apply sticky top-0 z-10 to each header <th> instead. The table must live inside a height-capped scroll box — max-h-[...] overflow-y-auto — because sticky only sticks within a scrolling ancestor; with no capped container the header has nothing to stick against and just scrolls away with everything else. Give the header cells an opaque bg- (Demo 13 uses a frosted backdrop-blur pane) or body rows bleed through the transparent strip as they pass under it. The z-10 keeps the header painting above body content during the scroll — drop it and the first data row renders on top of the header.

Demo 07's wide revenue sheet pins the product column with sticky left-0 on the first cell of every row while the wrapper scrolls via overflow-x-auto. Give that pinned cell an opaque background — it sits over the scrolling columns, and without a bg- the month columns slide visibly underneath it. Mind the corner: the top-left cell is both a sticky header (top-0) and a sticky column (left-0), so it needs a higher z- than either axis alone, otherwise one axis wins and clips it. A right-edge shadow — a shadow- utility or an after: pseudo — sells the pin by separating the frozen column from the scroll region. Mark those cells <th scope=row> so the pinned labels are announced as each row's header rather than read as plain data.

Demo 09 styles the whole row from the checkbox with the parent selector: the <tr> carries has-[:checked]:bg-..., has-[:checked]:line-through and a left accent rail via has-[:checked]:border-l-. Tailwind compiles that to a real :has() rule, so the row reacts with no JavaScript. The progress bar scales the same idea up, though a live count of how many boxes are ticked does need a small script — CSS can't total matches across siblings. Two gotchas: :has() is absent in very old engines, so treat the row tint as progressive enhancement, not load-bearing state; and line-through on the <tr> inherits down, so an inner badge you don't want struck needs no-underline to opt out. Keep each control a real <input type=checkbox> paired with a <label> so it stays keyboard-operable.

Demo 06 stripes with structural variants — odd:bg-white/5 and even:bg-transparent on each body <tr>, which compile to :nth-child() rules. Because this is a glass table over gradient orbs, the stripes are semi-transparent (/5, /10) so the blurred background still reads through; a solid fill would kill the effect. Put the variants on the <tr>, not on individual <td>, or the stripe breaks at every cell border. One subtlety: odd: and even: count all siblings, so a hidden or column-spanning row inside the <tbody> flips the alternation from that point down — keep spacer rows out of the body. Treat striping as decoration only; never let row colour carry meaning, since the tint is invisible to screen readers and to anyone who can't separate the two shades.

Yes, because they're built on real table semantics rather than <div> grids. Column headers use <th scope=col>, and where a row has its own label — Demo 11's nutrient names, Demo 07's pinned product column — that cell is <th scope=row>, so a reader announces "Protein, 12 grams" instead of a bare number. Add a <caption> naming the table. When you visually hide the header to stack into cards (Demo 01), keep the real <thead> in the DOM with sr-only, never hidden, so structure survives. The sortable grid in Demo 03 should expose aria-sort on the active header and keep its control a real <button>. Finally, colour-only cues — the crypto up/down tint, the struck checked row — need a text or icon equivalent, since tint alone fails on contrast and for colour-blind users.

Use a <table> when the data is genuinely two-dimensional — a value sitting at the intersection of a row and a column — which is exactly Demo 10's day-by-time timetable, Demo 07's product-by-month revenue, and Demo 11's nutrient-by-metric panel. Reach for cards or a <dl> instead when each row is really one entity with a few attributes and no cross-column comparison; forcing that into a table adds header overhead for nothing, which is why Demo 01 collapses into cards at mobile where side-by-side comparison is impossible anyway. Never use a table for page layout. If a table is so wide it always needs horizontal scroll on desktop (Demo 07), first ask whether some columns can move into a detail view. And be sparing with the heavy glass and neumorphic treatments (Demos 06, 12, 13) on dense grids — the blur and soft shadows trade legibility for style exactly where legibility matters most.