Styling a table in CSS

Two properties do most of the work, and both of them are on the table itself.

.data {
  inline-size: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.data caption {
  caption-side: bottom;
  text-align: start;
  color: #64748b;
}

.data :is(th, td) {
  padding: 0.5rem 0.75rem;
  border-block-end: 1px solid #e5e7eb;
  text-align: start;
}

.data tbody tr:hover { background: #f8fafc; }

How it works

1. border-collapse: collapse merges adjacent borders into one line.
2. table-layout: fixed sizes columns from the first row, which is faster and stabler.
3. text-align on a column is set per cell, or through a <col>.

Keywords and builtins used here

• background
• color
• data
• padding
• px
• rem

The run, in numbers

Lines

20

Characters to type

339

Tokens

79

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 63 seconds.

Type this snippet

Step 2 of 3 in Styling content, step 24 of 26 in Selectors & the box model.

← Previous Next →