Table

.talos-table is a borderless data grid. The head is uppercase HUD lettering over a hairline rule, body rows divide on subtle 1px lines, and each row tints on :hover. There’s no chrome — the structure is the readability: numbers lock to tabular figures so columns align, and the sort chevron rotates off aria-sort, so the markup state and the visual state are the same thing.

Default

<div class="talos-table-wrap">
  <table class="talos-table">
    <thead>
      <tr><th>Txn</th><th>Node</th><th class="talos-table__num">Load %</th></tr>
    </thead>
    <tbody>
      <tr><td>TX-9043</td><td>atlas-01</td><td class="talos-table__num">62.4</td></tr>
    </tbody>
  </table>
</div>

Wrap the table in .talos-table-wrap so it scrolls horizontally instead of overflowing. Each tbody tr brightens on :hover; numeric cells take __num to right-align and switch to tabular figures.

Zebra

<table class="talos-table talos-table--zebra">…</table>

--zebra fills every even tbody row with --talos-surface-1 for scan-down banding. The hover tint still layers on top.

Dense

<table class="talos-table talos-table--dense">…</table>

--dense tightens head and body padding for high-row-count grids. Combine with --zebra on the same element.

Sortable header

<th aria-sort="ascending"><span class="talos-table__sort">Node</span></th>
<th aria-sort="descending"><span class="talos-table__sort">Load %</span></th>

Wrap the header label in __sort to draw a chevron. It sits dimmed when the column is unsorted, and aria-sort on the <th> lights it and rotates it — ascending flips it up, descending points it down. Toggle aria-sort in JS to drive sort state; the chevron follows the attribute.

Classes