# Table

Source: https://iriscss.com/documentation/elements/table/

Tables are full width with header, body and footer lines. Add a class for stripes, hover or a sticky header.

```html
<table>
  <caption>Plans</caption>
  <thead>
    <tr><th scope="col">Plan</th><th scope="col">Projects</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Free</th><td>3</td><td>$0</td></tr>
    <tr><th scope="row">Pro</th><td>Unlimited</td><td>$12</td></tr>
    <tr><th scope="row">Team</th><td>Unlimited</td><td>$40</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Billed</th><td colspan="2">Monthly</td></tr>
  </tfoot>
</table>
```

Cells use even digit widths, so number columns line up.

## Striped

```html
<table class="striped">
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Ada</td><td>Engineer</td></tr>
    <tr><td>Grace</td><td>Admiral</td></tr>
    <tr><td>Alan</td><td>Mathematician</td></tr>
    <tr><td>Linus</td><td>Maintainer</td></tr>
  </tbody>
</table>
```

## Hover

`.hover` highlights the row under the pointer.

```html
<table class="hover">
  <thead>
    <tr><th scope="col">Order</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr><td>#1042</td><td>Shipped</td></tr>
    <tr><td>#1043</td><td>Packing</td></tr>
    <tr><td>#1044</td><td>Paid</td></tr>
  </tbody>
</table>
```

## Sticky header

`.sticky` keeps the header in view while the page scrolls. Inside a `.table-responsive` wrapper with a max height, it sticks to the wrapper instead.

```html
<div class="table-responsive" style="max-height: 10rem">
  <table class="sticky striped">
    <thead>
      <tr><th scope="col">Shade</th><th scope="col">Variable</th></tr>
    </thead>
    <tbody>
      <tr><td>50</td><td>--i-color-blue-50</td></tr>
      <tr><td>100</td><td>--i-color-blue-100</td></tr>
      <tr><td>200</td><td>--i-color-blue-200</td></tr>
      <tr><td>300</td><td>--i-color-blue-300</td></tr>
      <tr><td>400</td><td>--i-color-blue-400</td></tr>
      <tr><td>500</td><td>--i-color-blue-500</td></tr>
      <tr><td>600</td><td>--i-color-blue-600</td></tr>
    </tbody>
  </table>
</div>
```

## Sizes

`.small`, `.medium` and `.large` change the cell padding and font size.

```html
<table class="small">
  <tbody>
    <tr><td>Small</td><td>Compact rows</td></tr>
    <tr><td>Table</td><td>For dense data</td></tr>
  </tbody>
</table>
<table class="large">
  <tbody>
    <tr><td>Large</td><td>Roomy rows</td></tr>
  </tbody>
</table>
```

## Responsive

Wrap a wide table in `.table-responsive` to scroll it sideways instead of the page. Keyboard users can only scroll it once it can take focus, so give it `tabindex="0"` and an `aria-label`.

```html
<div class="table-responsive">
  <table>
    <thead>
      <tr><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th><th scope="col">Sun</th><th scope="col">Total</th></tr>
    </thead>
    <tbody>
      <tr><td>1,204 visits</td><td>1,388 visits</td><td>1,512 visits</td><td>1,470 visits</td><td>1,290 visits</td><td>860 visits</td><td>790 visits</td><td>8,514 visits</td></tr>
    </tbody>
  </table>
</div>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-table-header-border-width` | `var(--i-border-width)` |
| `--i-table-header-font-weight` | `600` |
| `--i-table-color-border` | `var(--i-color-subtle-border)` |
| `--i-table-header-color-background` | `var(--i-color-background)` |
| `--i-table-row-striped-color-background` | `#6f78870a` |
| `--i-table-row-hover-color-background` | `color-mix(in oklab, var(--i-color-text) 8%, transparent)` |