frutjam/dist/components/table.css

CSS-only Tailwind CSS v4 component library. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.

/*! frutjam v2.2.5 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */:where(.table-pin-cols) :where(tr th){position:sticky;inset-inline-start:0;inset-inline-end:0;background-color:var(--color-table)}:where(.table-pin-rows) :where(thead tr){position:sticky;inset-block-start:0;background-color:var(--color-table);z-index:1}.table{--radius-table:calc(var(--border-radius)*4);--color-table:var(--color-base);--color-table-soft:var(--color-base-soft);--color-on-table-soft:var(--color-on-base-soft);--color-table-active:var(--color-base-active);border-collapse:collapse;position:relative;width:100%;text-align:start;border-radius:var(--radius-table);font-size:var(--text-base);:where(th,td){padding-inline:1rem;padding-block:.75rem;vertical-align:middle;text-align:start}:where(thead,tfoot){font-size:.875rem;font-weight:600;white-space:nowrap;color:var(--color-on-table-soft)}:where(tfoot){border-block-start:1px solid var(--color-table-soft)}:where(thead tr,tbody tr:not(:last-child)){border-block-end:1px solid var(--color-table-soft)}display:table}:where(.table-hover) :where(tbody tr){transition-property:background-color;transition-duration:.15s;transition-timing-function:linear}:where(.table-hover) :where(tbody tr):hover{background-color:var(--color-table-soft)}:where(.table-zebra) :where(tbody tr:nth-child(2n)){background-color:var(--color-table-soft)}:where(.table-zebra-cols) :where(tbody tr td:nth-child(2n)){background-color:var(--color-table-soft)}:where(.table-zebra-rows) :where(tbody tr:nth-child(2n)){background-color:var(--color-table-soft)}:where(.table-lg) :where(:not(thead,tfoot) tr){font-size:1.125rem}:where(.table-lg) :where(th,td){padding-inline:1.25rem;padding-block:1rem}:where(.table-md) :where(:not(thead,tfoot) tr){font-size:.875rem}:where(.table-md) :where(th,td){padding-inline:1rem;padding-block:.75rem}:where(.table-sm) :where(:not(thead,tfoot) tr){font-size:.75rem}:where(.table-sm) :where(th,td){padding-inline:.75rem;padding-block:.5rem}:where(.table-xl) :where(:not(thead,tfoot) tr){font-size:1.375rem}:where(.table-xl) :where(th,td){padding-inline:1.5rem;padding-block:1.25rem}:where(.table-xs) :where(:not(thead,tfoot) tr){font-size:.6875rem}:where(.table-xs) :where(th,td){padding-inline:.5rem;padding-block:.25rem}