/**
* Fluid Framework - Responsive Table Component
* @layer components
*
* Tables that adapt to their container.
* Responsive strategies: horizontal scroll, stacked on mobile.
*
* Usage:
*
*
*
*
* | Name |
* Status |
* Amount |
*
*
*
*
* | Item |
* Active |
* $99.00 |
*
*
*
*
is its
* title, | shows "Price … value", and a
* | without data-label (a name, actions) spans the card
*/
@layer components {
/* The wrap only scrolls: no wrapper card. */
.table-wrap {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
/* The base table (base.css) carries the look: label-voice head over a
2px ink rule, hairline rows, tabular lining figures, no zebra, no hover. */
.table {
inline-size: 100%;
line-height: 1.45;
}
.table thead th {
position: relative;
white-space: nowrap;
}
/* Row headers (a | in the body) wrap; only column headers stay on one
line, so a long name cannot push the table off a phone. */
.table tbody th { white-space: normal; }
.table td { vertical-align: middle; }
.table :is([data-align="end"], [data-align="right"], [data-type="numeric"]) { text-align: end; }
.table [data-align="center"] { text-align: center; }
/* ========================================
VARIANTS
======================================== */
.table[data-variant="striped"] tbody tr:nth-child(even) { background: var(--color-surface); }
.table[data-variant="bordered"] :is(th, td) {
border: var(--border-width) solid var(--color-border);
padding-inline: var(--space-3);
}
.table[data-variant="compact"] :is(th, td) { padding-block: var(--space-2); }
.table[data-hover] tbody tr:hover { background: var(--color-surface); }
.table[data-selectable] tbody tr { cursor: pointer; }
.table[data-selectable] tbody tr[aria-selected="true"] { background: var(--accent-subtle); }
/* Sticky first column: its edge is a logical hairline (RTL-safe). */
.table[data-sticky-col] :is(th, td):first-child {
position: sticky;
inset-inline-start: 0;
z-index: var(--z-raised);
background: var(--color-background);
border-inline-end: var(--border-width) solid var(--color-border);
}
.table[data-sticky-col] th:first-child { z-index: calc(var(--z-raised) + 1); }
.table[data-sticky-header] thead th {
position: sticky;
inset-block-start: 0;
z-index: var(--z-raised);
background: var(--color-background);
}
/* ========================================
SORTABLE HEADERS
======================================== */
.table th[data-sortable] {
cursor: pointer;
user-select: none;
padding-inline-end: var(--space-6);
}
.table th[data-sortable]:hover { color: var(--color-text); }
.table th[data-sortable]::after {
content: "";
position: absolute;
inset-inline-end: var(--space-3);
inset-block-start: 50%;
translate: 0 -50%;
inline-size: 0.75rem;
block-size: 0.75rem;
background: var(--color-text-subtle);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
opacity: 0.4;
}
.table th[data-sort="asc"]::after {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M8 14l4-4 4 4'/%3E%3C/svg%3E");
opacity: 1;
background: var(--accent);
}
.table th[data-sort="desc"]::after {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E");
opacity: 1;
background: var(--accent);
}
.table__empty {
text-align: center;
padding-block: var(--space-xl);
color: var(--color-text-muted);
}
.table__empty td { border: none; }
.table caption {
padding-block: var(--space-s);
font-size: var(--step--1);
color: var(--color-text-muted);
text-align: start;
caption-side: bottom;
}
.table tfoot td {
font-weight: var(--weight-semibold);
border-block-start: var(--border-width-thick) solid var(--color-border-strong);
}
/* ========================================
RESPONSIVE: stacked rows on phones (data-responsive)
======================================== */
@media (max-width: 40rem) {
.table[data-responsive] thead {
/* Visually hide header but keep accessible */
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.table[data-responsive] tbody tr {
display: block;
padding-block: var(--space-4);
border-block-end: var(--border-width) solid var(--color-border);
}
.table[data-responsive] tbody tr:last-child {
border-block-end: none;
}
.table[data-responsive] td {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
border: none;
text-align: end;
overflow-wrap: anywhere; /* hostnames, URLs and codes wrap instead of widening the page */
}
/* A row header (the item's or page's name) is the card's title */
.table[data-responsive] tbody th {
display: block;
padding: 0;
padding-block-end: var(--space-2);
font-size: var(--step-0);
text-transform: none;
letter-spacing: normal;
color: var(--color-text);
background: none;
border: none;
overflow-wrap: anywhere;
}
/* A cell with no data-label (a name, a row of actions) takes the full width,
start-aligned, instead of being pushed to the end beside an empty label */
.table[data-responsive] td:not([data-label]) {
display: block;
text-align: start;
}
/* Use data-label for row headers on mobile */
.table[data-responsive] td::before {
content: attr(data-label);
flex-shrink: 0; /* the label keeps its width; the value wraps */
overflow-wrap: normal;
font-weight: var(--weight-semibold);
color: var(--color-text);
text-align: start;
}
.table[data-responsive] td[data-align] {
text-align: end;
}
}
}
|