Responsive stacked table

A responsive stacked table collapses at narrow widths for better readability on small screens.

Stacked bordered table
(when on a mobile-width screen)
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Stacked borderless table
(when on a mobile-width screen)
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Stacked bordered table with headers
(when on a mobile-width screen)
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Stacked borderless table with headers
(when on a mobile-width screen)
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
<div class="table-example-container">

<div class="width-mobile">
  <table class="usa-table usa-table--stacked">
    <caption>Stacked bordered table <br>(when on a mobile-width screen)</caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">Declaration of Independence</th>
        <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
        <td data-label="Year">1791</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="width-mobile">
  <table class="usa-table usa-table--borderless usa-table--stacked">
    <caption>Stacked borderless table <br>(when on a <span class="text-no-wrap">mobile-width</span> screen)</caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">Declaration of Independence</th>
        <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
        <td data-label="Year">1791</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="width-mobile">
  <table class="usa-table usa-table--stacked-header">
    <caption>Stacked bordered table with headers <br>(when on a mobile-width screen)</caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">Declaration of Independence</th>
        <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
        <td data-label="Year">1791</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="width-mobile">
  <table class="usa-table usa-table--borderless usa-table--stacked-header">
    <caption>Stacked borderless table with headers <br>(when on a mobile-width screen)</caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th data-label="Document title" scope="row">Declaration of Independence</th>
        <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
        <td data-label="Year">1776</td>
      </tr>
      <tr>
        <th data-label="Document title" scope="row">Bill of Rights</th>
        <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
        <td data-label="Year">1791</td>
      </tr>
    </tbody>
  </table>
</div>

</div>
<style scoped>

.table-example-container {
  display: flex;
  column-gap: 2rem;
  row-gap: 2rem;
  flex-flow: row wrap;
  justify-content: space-around;
}
</style>