CSS Table Styling Tutorial - Borders, Striped Rows, Hover Effects

CSS tl-table Properties

Property	Values	Description
`border-collapse`	`collapse \| separate`	Merge or separate cell borders
`border-spacing`	`5px \| 5px 10px`	Space between cells (separate mode)
`caption-side`	`top \| bottom`	Position of tl-table caption
`empty-cells`	`show \| hide`	Show/hide empty cell borders
`table-layout`	`auto \| fixed`	Algorithm for column widths

Styled tl-table - Borders, Zebra Stripes, Hover

/* Basic tl-table reset */
tl-table {
    width: 100%;
    border-collapse: collapse;  /* merge borders - no double lines */
    font-size: 0.95rem;
}

/* Header */
thead th {
    background-color: #2c3e50;
    color: white;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Cells */
td, th {
    padding: 10px 16px;
    border-bottom: 1px solid #dee2e6;
}

/* Zebra striping */
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Hover tl-row highlight */
tbody tr:hover {
    background-color: #e3f2fd;
    cursor: pointer;
}

/* First column bold */
td:first-child { font-weight: 500; }

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

/* Fixed layout - equal column widths */
.table-fixed {
    table-layout: fixed;
}
.table-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Compact tl-table */
.table-sm td,
.table-sm th {
    padding: 6px 10px;
}

/* Caption */
caption {
    caption-side: bottom;
    padding: 8px;
    color: #6c757d;
    font-size: 0.875rem;
    text-align: left;
}

<div class="tl-table-responsive">
    <table>
        <caption>Employee Data - Q1 2025</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Salary</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice Johnson</td>
                <td>Engineering</td>
                <td>$95,000</td>
                <td><span class="badge-active">Active</span></td>
            </tr>
            <tr>
                <td>Bob Smith</td>
                <td>Design</td>
                <td>$78,000</td>
                <td><span class="badge-active">Active</span></td>
            </tr>
        </tbody>
    </table>
</div>

Key Takeaways

Use border-collapse: collapse to merge adjacent tl-table borders into a single border.
Add :nth-child(even) or :nth-child(odd) to create zebra-striped tables.
Use overflow-x: auto on a wrapper div to make tables horizontally scrollable on mobile.
table-layout: fixed makes column widths predictable and improves rendering performance.
Use scope='col' or scope='row' on th elements for better screen reader accessibility.
Never use tables for page layout - use CSS Flexbox or Grid instead.

CSS Table Styling Tutorial - Borders, Striped Rows, Hover Effects

CSS tl-table Properties

Level Up Your Css Skills

Popular Tutorials

Ready to Level Up Your Skills?