CSS Tables Styling Guide and Patterns

Introduction to CSS Tables

Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.

What You'll Learn:

Learn table layout styling, borders, zebra rows, sticky headers, and responsive table patterns.

Table Styling Basics

Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.

Basic Table CSS:

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #e5e7eb;
    padding: 0.75rem;
    text-align: left;
}
th { background: #f8fafc; }

Sample Output: Tables display clear headers, aligned cells, and optional hover/sticky behaviors for better data readability.

Zebra Rows and Hover

Theory: This topic explains practical CSS concepts used in real interfaces. Understanding the theory helps you choose the right properties and patterns.

Zebra + Hover:

tbody tr:nth-child(even) {
    background: #f8fafc;
}
tbody tr:hover {
    background: #eef6ff;
}

Sample Output: The example produces a clean, modern UI pattern with responsive behavior and better readability.

Sticky Header Tables

Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.

Sticky Head Example:

.table-wrap {
    max-height: 320px;
    overflow: auto;
}
thead th {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: #fff;
}

Sample Output: Tables display clear headers, aligned cells, and optional hover/sticky behaviors for better data readability.

CSS Tables Best Practices

Theory: Table styles should prioritize readability and data comparison. Header contrast, row spacing, and responsive behavior are essential.

Use sufficient padding for readability.
Maintain strong header contrast.
Add horizontal scroll for small screens.
Avoid overly dense tables without grouping.

Extended Tutorial: Responsive Tables

Theory: Wide tables overflow small screens. Patterns: horizontal scroll wrapper, stacked “card” rows via display changes, or hiding low-priority columns under breakpoints.

Example: Scroll container

.table-responsive-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

table.data { min-width: 720px; border-collapse: collapse; width: 100%; }
th, td { padding: 0.6rem 0.75rem; text-align: left; }
thead { background: #f8fafc; }

Sample output: Users swipe horizontally on mobile instead of squashing columns into unreadable widths.