Table Styling

Table layouts, responsive tables, striped rows, and sortable headers.

Overview

Well-styled tables display data clearly.

Key Concepts

• Table Layout — Fixed vs auto
• Striped Rows — Alternating colors
• Hover Effects — Row highlighting
• Responsive — Horizontal scroll
• Sticky Headers — Fixed headers

Code Examples

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

.table th,
.table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table th {
  background: #f8f9fa;
  font-weight: 600;
  position: sticky;
  top: 0;
}

/* Striped rows */
.table-striped tbody tr:nth-child(even) {
  background: #f8f9fa;
}

/* Hover effect */
.table-hover tbody tr:hover {
  background: #e9ecef;
}

/* Bordered table */
.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #ddd;
}

/* Responsive table */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

/* Sortable headers */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable::after {
  content: '↕';
  margin-left: 0.5rem;
  opacity: 0.3;
}

.sortable.asc::after {
  content: ' ^';
  opacity: 1;
}

.sortable.desc::after {
  content: ' v';
  opacity: 1;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success { background: #d4edda; color: #155724; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }

/* Actions column */
.table-actions {
  display: flex;
  gap: 0.5rem;
}

.table-actions button {
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Fixed column */
.table-fixed {
  table-layout: fixed;
}

.table-fixed col:first-child {
  width: 200px;
}

/* Sticky first column */
.table-sticky th:first-child,
.table-sticky td:first-child {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

.table-sticky th:first-child {
  z-index: 2;
}

Practice

Build a responsive data table with sorting and filtering.