CSS Table Styling Borders, Striped Rows, Hover Effects

Sticky Headers for Large Tables

Sticky headers can help users keep column meaning visible while scrolling long tables. Use position: sticky carefully with a background color and z-index so text does not overlap.

Use sticky only when the table is long enough to need it.
Set top and background.
Test inside scroll containers.

Status Cells and Color Contrast

Tables often show status such as paid, failed, pending, or active. Use text labels plus color, not color alone, so the meaning remains clear for all users.

Add readable labels.
Use sufficient contrast.
Avoid tiny badges that make scanning harder.

Numeric and Date Columns

Numbers and dates need alignment. Right-align numbers for comparison, use tabular numerals, and keep date formats consistent across the column.

Right-align money and counts.
Keep date format consistent.
Avoid mixing currencies in one column without labels.

Accessible Table HTML

<div class="table-wrap">
  <table class="report-table">
    <caption>Monthly sales report</caption>
    <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Orders</th>
        <th scope="col">Revenue</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>January</td><td>328</td><td>$24,600</td></tr>
      <tr><td>February</td><td>415</td><td>$31,900</td></tr>
    </tbody>
  </table>
</div>

Responsive and Readable Table CSS

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.report-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  border: 1px solid #dbe3ef;
  padding: 12px 14px;
}

.report-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.report-table td:nth-child(2),
.report-table td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Sticky Header Table CSS

.report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f172a;
  color: white;
}

.table-scroll {
  max-height: 420px;
  overflow: auto;
}

Accessible Status Badge

<td>
  <span class="status status-paid">Paid</span>
</td>

<style>
.status {
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-weight: 700;
}
.status-paid {
  background: #dcfce7;
  color: #166534;
}
</style>

Before you move on

CSS Table Styling Borders, Striped Rows, Hover Effects Mastery Check

4 checks

Preserve caption, header cells, scope, and table semantics while changing presentation.
Choose border-collapse, spacing, column sizing, and alignment from the data being compared.
Provide horizontal overflow or another readable narrow-screen treatment without hiding columns silently.
Test long values, empty cells, keyboard focus, zoom, contrast, and screen-reader header associations.

CSS Questions Learners Ask

It merges adjacent cell borders so the table does not show doubled lines.

Place it in a horizontally scrollable wrapper instead of squeezing every column until the text is unreadable.

No. Use th elements with the correct scope so assistive technology understands the relationships.

Previous Next

CSS Table Styling Borders, Striped Rows, Hover Effects

Sticky Headers for Large Tables

Status Cells and Color Contrast

Numeric and Date Columns

Accessible Table HTML

Responsive and Readable Table CSS

Sticky Header Table CSS

Accessible Status Badge

CSS Table Styling Borders, Striped Rows, Hover Effects Mastery Check

Tables Connections

CSS Questions Learners Ask

What does border-collapse change?

How should a wide table behave on a small screen?

Should table headers rely on bold text alone?

CSS Resources

Popular Tutorials