CSS Tables & Data Grids Effects

Striped data table with an ocean gradient header and a tinted row hover.

Scrollable table whose header stays pinned, with an ocean scrollbar thumb.

Borderless list table where hovering a row lights a blue bar down its left edge.

Spaced-row table with ocean status pills in the trailing cell.

Table headers that read as sortable — hover reveals the caret, the active column tints ocean.

Borderless metrics table in ocean that dims every row except the one under the cursor.

Monospace md data grid on a slate surface with full cell rules — for logs and console views.

Row headers frozen with `position: sticky` while the measures scroll, using a box-shadow as the divider so the seam does not scroll away.

Row selection with a bulk-action bar that replaces the header, and selected rows tinted so the count and the rows agree at a glance.

Zero-row state that keeps the header so the columns still teach what will appear, with one action rather than a bare "no data" line.

Collapsible group headers carrying their own subtotal, tinted across the row so a header never gets mistaken for data, with children indented under a disclosure caret.

Action tray that rises over the table once rows are ticked, carrying the count and keeping the destructive option visually apart from the safe one.

Quota table with an inline progress bar per row that thickens and brightens when the row is hovered.

Change log rendered as a diff, added rows tinted green with a plus and removed rows struck through in red.

CSV import preview headed by a red count banner, the two offending cells tinted and underlined with a wavy rule that raises the reason for the rejection on hover.

Detail row spanning the full width with `colspan`, keyed by an accent rule so the child reads as belonging to the row above it.

Plan matrix with the recommended column tinted top to bottom, and ticks and crosses drawn from borders rather than glyphs that vary by font.

Trend column drawn inline per row, so direction and current value sit on the same line instead of in a chart somewhere else on the page.

Spreadsheet-style cells that outline under the pointer and drop into an editing state in place, so committing a value never costs a dialog or a round trip to a detail page.

Grab handles straddling the header borders, each widening into a lit guide on hover — with fixed layout and ellipsis so a narrowed column truncates instead of reflowing.

Pricing comparison grid that highlights an entire column, not just a row, when any cell in it is hovered.

Data grid topped by a filter bar where each active constraint sits as a removable chip beside the search box.

Worksheet with a name box and formula bar over lettered columns and numbered rows, one column selected as a single outlined range complete with a fill handle at its corner.

Accounting ledger with tabular monospace credit and debit columns and a double-ruled balance row.

Cross-tab of regions against quarters with a tinted totals column and totals row meeting at the grand total.

Member list whose first column packs an initials disc beside a name stacked over its email address, with the role carried as a pill on the right and the owner pill tinted.

Compact data grid whose cells are tinted by value like a heatmap, with each cell popping forward on hover.

Invoice rows closed off by a footer that states the visible range and offers numbered pagination with the current page filled.

Real column headers over rounded grey placeholder bars of uneven length, a highlight sweeping across them on a stagger and speeding up while the pointer is over the table.

Invoice table whose rows are spaced apart as rounded cards that light their border and nudge on hover.

File-tree table with disclosure arrows and two levels of indentation, sizes right-aligned in tabular figures.

Stage rows carrying dotted grip handles, where pointing at one lifts it off the table with a shadow and drops a blue insertion line beneath it.

Ranking table with gold, silver and bronze rank tints, avatar chips and a warm row highlight on hover.

File rows whose size column slides away on hover as a strip of edit, download and delete buttons glides in from the right edge to take its place.