v149 · CSS · Grid · demo

Data Table Rules

A CSS grid used as a data table — column rules separate the data columns, row rules separate the rows. Toggle each rule type, adjust style and color live, and compare the generated CSS against the old border-on-every-cell hack.

Chrome 149+ — column-rule and row-rule in grid layout. In older browsers the rules don't render; add borders to child cells as a fallback.

Toggle column / row rules · adjust style and color · see the generated CSS update

Style:

Width:

Color:

Widget Alpha

$12,400

$14,200

$15,800

$18,100

Widget Beta

$8,700

$7,900

$9,400

$11,200

Widget Gamma

$5,200

$4,800

$6,300

Widget Delta

$22,100

$24,500

$27,300

$31,800

Widget Epsilon

$3,400

$2,800

$4,100

$3,700

Total

$51,800

$54,600

$61,400

$71,100

Loading…

/* Old approach — border on every cell, then cancel double borders */
.cell { border-right: 1px solid #ccc; border-bottom: 1px solid #eee; }
.cell:last-child { border-right: none; }
.row:last-child .cell { border-bottom: none; }

/* Gap decorations — purely decorative, zero layout impact */
.data-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 0 1rem;
  column-rule: 1px solid #ccc; /* draws in the column gap */
  row-rule: 1px solid #eee;    /* draws in the row gap (implied 0 gap here) */
}
/* Cell children need no borders at all */

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference