Table

layoutUSWDS-derived

A styled data table with support for bordered, borderless, striped, compact, scrollable, and stacked variants.

Variants

Borderless

Name	Value
Alpha	1
Beta	2

<table class="flex-table" data-variant="borderless">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Compact

Name	Value
Alpha	1
Beta	2

<table class="flex-table" data-compact="true">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Default

Document title	Description	Year
Declaration of Independence	Statement of US independence from Britain	1776
Bill of Rights	First 10 amendments to the Constitution	1791
Emancipation Proclamation	Freed enslaved people in Confederate states	1863

<table class="flex-table">
  <thead>
    <tr>
      <th scope="col">Document title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Declaration of Independence</td>
      <td>Statement of US independence from Britain</td>
      <td>1776</td>
    </tr>
    <tr>
      <td>Bill of Rights</td>
      <td>First 10 amendments to the Constitution</td>
      <td>1791</td>
    </tr>
    <tr>
      <td>Emancipation Proclamation</td>
      <td>Freed enslaved people in Confederate states</td>
      <td>1863</td>
    </tr>
  </tbody>
</table>

Scrollable

Name	Description	Year	Category	Status	Notes
Declaration of Independence	Statement of US independence from Britain	1776	Founding	Active	Widely celebrated
Bill of Rights	First 10 amendments to the Constitution	1791	Amendment	Active	Ratified by states

<div class="flex-table__container" data-scrollable="true" tabindex="0">
  <table class="flex-table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
        <th scope="col">Category</th>
        <th scope="col">Status</th>
        <th scope="col">Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Declaration of Independence</td>
        <td>Statement of US independence from Britain</td>
        <td>1776</td>
        <td>Founding</td>
        <td>Active</td>
        <td>Widely celebrated</td>
      </tr>
      <tr>
        <td>Bill of Rights</td>
        <td>First 10 amendments to the Constitution</td>
        <td>1791</td>
        <td>Amendment</td>
        <td>Active</td>
        <td>Ratified by states</td>
      </tr>
    </tbody>
  </table>
</div>

Striped

Name	Value	Status
Alpha	1	Active
Beta	2	Inactive
Gamma	3	Active
Delta	4	Inactive

<table class="flex-table" data-striped="true">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Value</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>1</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>2</td>
      <td>Inactive</td>
    </tr>
    <tr>
      <td>Gamma</td>
      <td>3</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Delta</td>
      <td>4</td>
      <td>Inactive</td>
    </tr>
  </tbody>
</table>

Contract

Class mapping

USWDS	Flex	Notes
`usa-table`	`.flex-table`	Base table class
`usa-table--borderless`	`data-variant="borderless"`	Borderless variant
`usa-table--striped`	`data-striped`	Alternating row backgrounds
`usa-table--compact`	`data-compact`	Reduced cell padding
`usa-table-container--scrollable`	`.flex-table__container[data-scrollable]`	Scrollable table wrapper
`usa-table--stacked`	`data-stacked`	Responsive stacking on mobile
`usa-table--stacked-header`	`data-stacked-header`	Stacked with header column visible

Verified properties

font-familyfont-sizeline-heightborder-collapsecolortext-alignpadding-toppadding-rightpadding-bottompadding-leftborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthbackground-color

Intentional differences

border-color: ours = var(--flex-color-text), USWDS = #1b1b1b

We use semantic token that resolves to same value in light mode

Source CSS

/* flex-table — USWDS Table conformance
   Variants: borderless
   Modifiers: data-striped, data-compact, data-scrollable, data-stacked, data-stacked-header, data-sticky-header */

/* --- Base table --- */

.flex-table {
  font-size: 1.06rem;
  line-height: 1.5;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--flex-color-text);
  margin: 1.25rem 0;
  text-align: start;
  inline-size: 100%;
}

.flex-table caption {
  text-align: start;
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: 0.75rem;
}

/* --- Base th/td --- */

.flex-table th,
.flex-table td {
  border: 1px solid var(--flex-color-text);
  padding: 0.5rem 1rem;
}

.flex-table th {
  background-clip: padding-box;
  line-height: 1.3;
  text-align: start;
  background-color: var(--flex-color-table-header);
  color: var(--flex-color-text);
  font-weight: 700;
}

.flex-table td {
  background-color: var(--flex-color-surface);
  font-weight: 400;
}

.flex-table thead td {
  background-clip: padding-box;
  line-height: 1.3;
  background-color: var(--flex-color-table-header);
  color: var(--flex-color-text);
}

/* --- Variant: borderless --- */

.flex-table[data-variant="borderless"] th {
  border-block-start: 0;
  border-inline-start: 0;
  border-inline-end: 0;
}

.flex-table[data-variant="borderless"] td {
  border-inline-start: 0;
  border-inline-end: 0;
}

.flex-table[data-variant="borderless"] th,
.flex-table[data-variant="borderless"] thead td {
  background-color: var(--flex-color-surface);
}

/* --- Modifier: striped --- */

.flex-table[data-striped] tbody tr:nth-child(odd) td {
  background-color: var(--flex-gray-5);
  color: var(--flex-color-text);
}

/* --- Modifier: compact --- */

.flex-table[data-compact] td,
.flex-table[data-compact] th {
  padding: 0.25rem 0.75rem;
}

/* --- Modifier: sticky-header --- */

.flex-table[data-sticky-header] thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

/* --- Scrollable container --- */

.flex-table__container {
  margin: 1.25rem 0;
  overflow-y: hidden;
  overflow-x: auto;
}

.flex-table__container .flex-table {
  margin: 0;
}

.flex-table__container[data-scrollable] td {
  white-space: nowrap;
}

/* --- Modifier: stacked (mobile-friendly) --- */

@media (max-width: 37.4375rem) {
  .flex-table[data-stacked] thead {
    display: none;
  }

  .flex-table[data-stacked] th,
  .flex-table[data-stacked] td {
    border-block-end-width: 0;
    display: block;
    inline-size: 100%;
  }

  .flex-table[data-stacked] tr {
    border-block-end: 0.25rem solid var(--flex-color-text);
    border-block-start-width: 0;
    inline-size: 100%;
  }

  .flex-table[data-stacked] tr td:first-child,
  .flex-table[data-stacked] tr th:first-child {
    border-block-start-width: 0;
  }

  .flex-table[data-stacked] tr:nth-child(odd) td {
    background-color: inherit;
  }

  .flex-table[data-stacked] tr:first-child td:first-child,
  .flex-table[data-stacked] tr:first-child th:first-child {
    border-block-start: 0.25rem solid var(--flex-color-text);
  }

  .flex-table[data-stacked] td[data-label],
  .flex-table[data-stacked] th[data-label] {
    padding-block-end: 0.75rem;
  }

  .flex-table[data-stacked] td[data-label]::before,
  .flex-table[data-stacked] th[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin: -0.5rem -1rem 0;
    padding: 0.75rem 1rem 0.25rem;
  }

  /* --- Modifier: stacked-header --- */

  .flex-table[data-stacked-header] thead {
    display: none;
  }

  .flex-table[data-stacked-header] th,
  .flex-table[data-stacked-header] td {
    border-block-end-width: 0;
    display: block;
    inline-size: 100%;
  }

  .flex-table[data-stacked-header] tr {
    border-block-end: 0.25rem solid var(--flex-color-text);
    border-block-start-width: 0;
    inline-size: 100%;
  }

  .flex-table[data-stacked-header] tr td:first-child,
  .flex-table[data-stacked-header] tr th:first-child {
    border-block-start-width: 0;
    font-size: 1.06rem;
    line-height: 1.1;
    background-color: var(--flex-color-table-header);
    color: var(--flex-color-text);
    font-weight: 700;
    padding: 0.75rem 1rem;
  }

  .flex-table[data-stacked-header] tr td:first-child::before,
  .flex-table[data-stacked-header] tr th:first-child::before {
    display: none;
  }

  .flex-table[data-stacked-header] tr:first-child td:first-child,
  .flex-table[data-stacked-header] tr:first-child th:first-child {
    border-block-start: 0.25rem solid var(--flex-color-text);
  }

  .flex-table[data-stacked-header] td[data-label],
  .flex-table[data-stacked-header] th[data-label] {
    padding-block-end: 0.75rem;
  }

  .flex-table[data-stacked-header] td[data-label]::before,
  .flex-table[data-stacked-header] th[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin: -0.5rem -1rem 0;
    padding: 0.75rem 1rem 0.25rem;
  }
}