CSS Tables Tutorial | Styling, Responsive & Zebra Striping Examples

1. Basic Table Styling

Start with a clean foundation using border-collapse, consistent padding, and subtle borders.

Basic Styled Table

Name	Email	Role	Status
Alice Johnson	alice@example.com	Developer	Active
Bob Smith	bob@example.com	Designer	Active
Carol White	carol@example.com	Manager	Away

Clean table with header styling and subtle bottom borders.

/* Base Table Styles */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th,
.table td {
  padding: 0.875rem 1rem;
  text-align: left;
}

.table th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
}

.table td {
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

2. Zebra Striping & Hover Effects

Alternating row colors improve readability. Hover effects help users track rows.

Zebra + Hover

Product	Category	Price	Stock
Wireless Mouse	Electronics	$29.99	142
USB-C Cable	Accessories	$12.99	89
Mechanical Keyboard	Electronics	$149.99	23
Monitor Stand	Furniture	$79.99	56

Hover over rows to see the highlight effect.

/* Zebra Striping */
.table--zebra tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Hover Effect */
.table--hover tbody tr {
  transition: background 0.15s ease;
}

.table--hover tbody tr:hover {
  background: #eef2ff;
}

3. Dark Theme Table

Dark tables work great in dark-themed dashboards and admin panels.

Dark Table

Server	Status	CPU	Memory
prod-web-01	Online	45%	2.4 GB
prod-web-02	Online	62%	3.1 GB
prod-db-01	High Load	89%	7.2 GB

Dark theme with status badges.

/* Dark Table */
.table-container--dark {
  background: #1e293b;
}

.table--dark th {
  background: #0f172a;
  color: #e2e8f0;
  border-bottom-color: #334155;
}

.table--dark td {
  color: #cbd5e1;
  border-bottom-color: #334155;
}

.table--dark tbody tr:hover {
  background: #334155;
}

4. Sticky Header

Keep headers visible while scrolling long tables using position: sticky.

Scrollable with Sticky Header

ID	Transaction	Date	Amount
#1001	Payment received	Mar 1, 2026	$250.00
#1002	Subscription	Mar 2, 2026	$49.99
#1003	Refund	Mar 3, 2026	-$29.99
#1004	Payment received	Mar 4, 2026	$175.00
#1005	Subscription	Mar 5, 2026	$49.99
#1006	Payment received	Mar 6, 2026	$320.00
#1007	Commission	Mar 7, 2026	$85.00

Scroll the table. The header stays fixed.

/* Scrollable Container */
.table-container--sticky {
  max-height: 15rem;
  overflow-y: auto;
}

/* Sticky Header */
.table--sticky th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e2e8f0;
}

5. Rich Content: Avatars, Badges & Actions

Tables can contain more than text: avatars, status badges, and action buttons.

Users Table with Actions

User	Role	Status
AJ Alice Johnson alice@example.com	Admin	Active
BS Bob Smith bob@example.com	Editor	Pending
CW Carol White carol@example.com	Viewer	Inactive

Avatar initials, status badges, and action buttons.

/* Avatar in Table */
.table-avatar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.table-avatar__img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

/* Status Badges */
.badge {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge--success { background: #dcfce7; color: #16a34a; }
.badge--warning { background: #fef3c7; color: #d97706; }
.badge--danger  { background: #fee2e2; color: #dc2626; }

/* Action Buttons */
.table-action {
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.table-action--edit {
  background: #eef2ff;
  color: #6366f1;
}

.table-action--edit:hover {
  background: #6366f1;
  color: white;
}

6. Bordered & Compact Variants

Different density and border styles for various use cases.

Bordered Table

Item	Qty	Price
Widget A	5	$10
Widget B	3	$15

Full borders on all cells.

Compact Table

Key	Value
Version	2.4.1
Build	1842
Env	Production

Reduced padding for dense data.

/* Bordered Table */
.table--bordered th,
.table--bordered td {
  border: 1px solid #e2e8f0;
}

/* Compact Table */
.table--compact th,
.table--compact td {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}