Menu
Pico Reforgedv2.0

Suggested

↑↓ to moveEnter to openEsc to close

Color scheme

Primary color

Theme: azure

ContentTable

Table

Full width tables with row borders, an optional striped style and a wrapper for horizontal scrolling.

On this page

A <table> fills its container and has a border under each row. Header cells are muted, smaller and medium weight, and numbers in body cells line up in tabular figures.

Table
<table>
  <thead>
    <tr>
      <th scope="col">Planet</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Moons</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Mercury</th>
      <td>4,879</td>
      <td>0</td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>12,756</td>
      <td>1</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>6,792</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total moons</th>
      <td></td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

Striped

Add .striped to shade every other body row.

Striped table
<table class="striped">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">Team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana Ribeiro</td>
      <td>Designer</td>
      <td>Product</td>
    </tr>
    <tr>
      <td>Bruno Matos</td>
      <td>Engineer</td>
      <td>Platform</td>
    </tr>
    <tr>
      <td>Carla Sousa</td>
      <td>Engineer</td>
      <td>Web</td>
    </tr>
  </tbody>
</table>

Wide tables

A table is 100% wide but cannot get narrower than its content. On a narrow screen, wrap the table in .overflow-auto so it scrolls sideways instead of breaking the page.

Scrolling wrapper
<div class="overflow-auto">
  <table>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Description</th>
        <th scope="col">Default</th>
        <th scope="col">Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>purge</td>
        <td>How unused selectors are removed from the output of a build</td>
        <td>safe</td>
        <td>safe, aggressive or off</td>
      </tr>
    </tbody>
  </table>
</div>

Accessibility

Use <th> with scope="col" or scope="row" for headers, and add a <caption> when the table needs a title. Reach for a table only for tabular data, not for layout. For sortable or selectable tables, see the data table extra.

Customization

--pico-table-border-color
var(--pico-muted-border-color)
Row borders.
--pico-table-row-stripped-background-color
light-dark(oklch(0.5 0.01 265 / 0.035), oklch(1 0 0 / 0.05))
Background of odd rows in .striped tables. The name keeps the spelling from Pico CSS.
--pico-border-width
0.0625rem
Row border width. Header and footer cells use 0.1875rem.
--pico-spacing
1rem
Cells use half of it vertically and all of it horizontally.