frutjam/dist/components/table.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.table-pin-cols{:where(&) :where(tr th){position:sticky;inset-inline-start:0;inset-inline-end:0;background-color:var(--color-table)}}.table-pin-rows{:where(&) :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)}}.table{display:table}.table-hover{:where(&) :where(tbody tr){transition-property:background-color;transition-duration:.15s;transition-timing-function:linear}:where(&) :where(tbody tr):hover{background-color:var(--color-table-soft)}}.table-zebra{:where(&) :where(tbody tr:nth-child(2n)){background-color:var(--color-table-soft)}}.table-zebra-cols{:where(&) :where(tbody tr td:nth-child(2n)){background-color:var(--color-table-soft)}}.table-zebra-rows{:where(&) :where(tbody tr:nth-child(2n)){background-color:var(--color-table-soft)}}.table-lg{:where(&) :where(:not(thead,tfoot) tr){font-size:1.125rem}:where(&) :where(th,td){padding-inline:1.25rem;padding-block:1rem}}.table-md{:where(&) :where(:not(thead,tfoot) tr){font-size:.875rem}:where(&) :where(th,td){padding-inline:1rem;padding-block:.75rem}}.table-sm{:where(&) :where(:not(thead,tfoot) tr){font-size:.75rem}:where(&) :where(th,td){padding-inline:.75rem;padding-block:.5rem}}.table-xl{:where(&) :where(:not(thead,tfoot) tr){font-size:1.375rem}:where(&) :where(th,td){padding-inline:1.5rem;padding-block:1.25rem}}.table-xs{:where(&) :where(:not(thead,tfoot) tr){font-size:.6875rem}:where(&) :where(th,td){padding-inline:.5rem;padding-block:.25rem}}