CSS Tables

CSS Tables: Borders, Zebra Stripes, and Responsive Wrappers

CSS table properties turn plain browser tables into scannable reports, pricing grids, and admin dashboards. Two core rules—border-collapse: collapse; and generous cell padding—immediately transform cramped default tables into clean UI components.

Essential Table Styling Rules

• border-collapse: collapse;: Merges adjacent cell borders into crisp single lines instead of double-spaced boxes.
• Cell Padding & Alignment: Give th and td comfortable padding (10px 14px), left-align text labels, and right-align numeric columns (text-align: right;) so decimal points line up.
• Zebra Striping: Alternate subtle row tints with tbody tr:nth-child(even) and highlight rows on pointer hover (tbody tr:hover).
• Responsive Overflow: Wrap wide data tables inside a container with overflow-x: auto; so phones scroll the table horizontally instead of breaking the whole page width.

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, sans-serif;
}

.data-table th,
.data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.data-table thead th {
    background-color: #f8fafc;
    color: #0f172a;
    font-weight: 600;
}

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

.data-table tbody tr:hover {
    background-color: #eff6ff;
}

Common Mistakes to Avoid

• Applying overflow-x: auto directly to the table tag: table elements ignore horizontal overflow scrolling unless wrapped inside a block div with overflow-x: auto;.
• Using tr:nth-child(even) without tbody: Without scoping to tbody, header rows inside thead can confuse alternating colors visually.
• Putting vertical borders everywhere: Horizontal border-bottom dividers look cleaner and less cluttered than heavy four-sided grids.

Frequently Asked Questions

How do I make table columns share equal widths automatically?

Add table-layout: fixed; width: 100%; on the table so browsers divide column widths evenly (or obey explicit th widths) without waiting to scan every row.

How can I keep table headers visible when scrolling long tables?

Apply position: sticky; top: 0; to thead th inside a fixed-height scrollable wrapper with a solid background-color.