Advanced CSS Tables
Master complex table features - sorting, filtering, sticky headers, and professional data presentation
Advanced Table Features
Enhanced tables with sorting indicators, sticky headers, and interactive features.
Sortable Table
| Name | Score | Date | Actions |
|---|---|---|---|
| Alice Brown | 95 | 2024-01-10 | |
| Bob Davis | 87 | 2024-01-12 | |
| Carol White | 92 | 2024-01-11 |
/* Sortable headers */
.sortable {
cursor: pointer;
position: relative;
padding-right: 2rem;
}
.sortable:hover {
background: var(--colour-primary-light);
}
.sort-indicator::after {
content: '↕️';
position: absolute;
right: 0.5rem;
opacity: 0.3;
}
.active-asc .sort-indicator::after {
content: '↑';
opacity: 1;
}
.active-desc .sort-indicator::after {
content: '↓';
opacity: 1;
}Data Table with Filters
| Product | Category | Price |
|---|---|---|
| Smartphone X | Electronics | £699 |
| Winter Jacket | Clothing | £129 |
| CSS Mastery | Books | £35 |
/* Table filters */
.table-filters {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.filter-input,
.filter-select {
padding: 0.5rem 1rem;
border: 1px solid var(--colour-border);
border-radius: 0.25rem;
background: var(--colour-surface);
}
.filter-input {
flex: 1;
}
/* Highlighted search results */
.highlight-match {
background: var(--colour-warning-light);
padding: 0.125rem 0.25rem;
border-radius: 0.125rem;
}Fixed Header Table
| Month | Revenue | Growth |
|---|---|---|
| January | £45,230 | +12% |
| February | £48,650 | +8% |
| March | £52,180 | +7% |
| April | £51,990 | -0.4% |
| May | £55,420 | +6.6% |
| June | £58,760 | +6% |
/* Fixed header */
.table-fixed-wrapper {
height: 200px;
overflow-y: auto;
border: 1px solid var(--colour-border);
}
.table-fixed-header thead th {
position: sticky;
top: 0;
background: var(--colour-surface);
z-index: 10;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}Table Best Practices
Use Semantic HTML
Always use proper table elements (thead, tbody, th) for accessibility.
Mobile-First Design
Consider how tables will display on small screens from the start.
Visual Hierarchy
Use colour, weight, and spacing to guide the eye through data.