CASEWORK
COMPONENTS / TABLE

Table

Dense data rows on hairlines. One strong rule under the header, hairlines between rows, no vertical rules, no zebra striping. Numbers are mono, right-aligned, tabular. Wide tables scroll inside their own frame — the page never scrolls sideways.

VERSION1.0.0
TOKENS9 CONSUMED
CONTRASTAA / AAA
DEPENDENCIESNONE
01 / LIVE INSTANCES — ALL STATES
ROW HOVER IS LIVE — MOVE THE POINTER
DEFAULT — POPULATED, WITH NUMERIC AND MONO CELLS
THEMESKUPRICESALESSTATUS
PaperTHM-01$39128LIVE
InkTHM-02$3996LIVE
TerminalTHM-03$3961QUEUED
EMPTY STATE — SAY WHAT WOULD FILL IT
THEMESKUPRICESALESSTATUS
NO THEMES YET — THE FIRST ONE APPEARS HERE AFTER PUBLISHING.
LOADING: RENDER THE SKELETON COMPONENT IN ROWS (QUEUED). SORTING / SELECTION: OUT OF SCOPE V1 — ADD ONLY WHEN A REAL VIEW NEEDS IT.
02 / ANATOMY — EXPLODED VIEW
01 HEADER ROW
--font-mono · --t1 · --fg-faint · UPPERCASE
THEME   SKU   PRICE
02 HEAD RULE
1PX --line-strong — THE ONLY STRONG LINE
03 DATA ROW
--font-ui --t2 · NUMBERS MONO TABULAR RIGHT
Paper   THM-01   $39
04 ROW RULE
--hair BETWEEN ROWS · HOVER WASH --bg-inset
FIG. TB-01 — CELL PADDING --s3 BLOCK / --s4 INLINE-END. NO VERTICAL RULES, NO ZEBRA.
03 / TOKENS CONSUMED
PROPERTYTOKENVALUE
HEADER FONT--font-mono / --t112PX UPPERCASE
CELL FONT--font-ui / --t214PX
HEAD RULE--line-strong1PX
ROW RULE--hair1PX --line
CELL PADDING--s3 / --s412 / 16PX
ROW HOVER--bg-insetWASH
HEADER TEXT--fg-faint#908E87
EMPTY TEXT--fg-faint / --t1MONO CENTERED
DURATION--d1 / --ease120MS
04 / CODE — COPY-READY
<div class="tbl-wrap">
  <table class="tbl">
    <thead>
      <tr>
        <th>THEME</th>
        <th>SKU</th>
        <th class="num">PRICE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Paper</td>
        <td class="mono">THM-01</td>
        <td class="num">$39</td>
      </tr>
    </tbody>
  </table>
</div>

/* CSS — components.css / TABLE
   .tbl-wrap owns overflow-x: auto. */
05 / RESPONSIVE BEHAVIOUR
≥1024FULL WIDTH OF ITS COLUMN.
640–1023UNCHANGED; .TBL-WRAP SCROLLS IF COLUMNS OVERFLOW.
<640HORIZONTAL SCROLL INSIDE THE FRAME. NEVER REFLOW CELLS INTO CARDS SILENTLY — IF A VIEW NEEDS CARDS, DESIGN CARDS.
06 / ACCESSIBILITY
ELEMENTNATIVE <TABLE> WITH <THEAD>/<TBODY> AND <CAPTION>.
ARIANONE FOR STATIC DATA. SCOPE="COL" ON TH WHEN AMBIGUOUS.
FOCUSONLY INTERACTIVE CELLS (LINKS, BUTTONS) TAKE FOCUS — ROWS NEVER DO.
CONTRASTCELLS 18.2:1 AAA · HEADERS 3.2:1 — 12PX UPPERCASE READS AS UI LABEL; PAIR WITH THE HEAD RULE.