Scrollable table

A scrollable table is ideal for dense, tabular data.

Scrollable table
Federal Budget
Baseline Projections		 2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

Scrollable table with horizontal stripes
Federal Budget
Baseline Projections		 2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

Compact scrollable table
Federal Budget
Baseline Projections		 2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

Compact scrollable table with horizontal stripes
Federal Budget
Baseline Projections		 2017 2018 2019 2020 2021 Hist. Avg.
%GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD* %GDP USD*
Revenue 17.2% 3,316 16.4% 3,338 16.3% 3,490 16.7% 3,678 16.7% 3,827 17.4% 3,381
Outlays 20.6% 3,982 20.2% 4,142 21.0% 4,470 21.3% 4,685 21.6% 4,949 20.3% 4,198
Budget Deficit -3.5% -665 -3.8% -804 -4.6% -981 -4.6% -1,008 -4.9% -1,123 -2.9% -483
Debt Held by Public 76.0% 14,665 77.4% 15,688 79.2% 16,762 80.9% 17,872 83.1% 18,998 41.7% 8,065

* in billions of dollars. Data for illustration purposes only.

<div class="usa-table-container--scrollable">
  <table class="usa-table">
    <caption>Scrollable table</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>


<div class="usa-table-container--scrollable">
  <table class="usa-table usa-table--striped">
    <caption>Scrollable table with horizontal stripes</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>

<div class="usa-table-container--scrollable">
  <table class="usa-table usa-table--compact">
    <caption>Compact scrollable table</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>

<div class="usa-table-container--scrollable">
  <table class="usa-table usa-table--compact usa-table--striped">
    <caption>Compact scrollable table with horizontal stripes</caption>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
        <th colspan="2" scope="colgroup" class="text-center">2017</th>
        <th colspan="2" scope="colgroup" class="text-center">2018</th>
        <th colspan="2" scope="colgroup" class="text-center">2019</th>
        <th colspan="2" scope="colgroup" class="text-center">2020</th>
        <th colspan="2" scope="colgroup" class="text-center">2021</th>
        <th colspan="2" scope="colgroup" class="text-center">Hist. Avg.</th>
      </tr>
      <tr>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
        <th scope="col" class="text-right">%GDP</th>
        <th scope="col" class="text-right">USD*</th>
      </tr>
    </thead>
    <tr>
      <th scope="row">Revenue</th>
      <td class="font-mono-sm text-tabular text-right">17.2%</td>
      <td class="font-mono-sm text-tabular text-right">3,316</td>
      <td class="font-mono-sm text-tabular text-right">16.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,338</td>
      <td class="font-mono-sm text-tabular text-right">16.3%</td>
      <td class="font-mono-sm text-tabular text-right">3,490</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,678</td>
      <td class="font-mono-sm text-tabular text-right">16.7%</td>
      <td class="font-mono-sm text-tabular text-right">3,827</td>
      <td class="font-mono-sm text-tabular text-right">17.4%</td>
      <td class="font-mono-sm text-tabular text-right">3,381</td>
    </tr>
    <tr>
      <th scope="row">Outlays</th>
      <td class="font-mono-sm text-tabular text-right">20.6%</td>
      <td class="font-mono-sm text-tabular text-right">3,982</td>
      <td class="font-mono-sm text-tabular text-right">20.2%</td>
      <td class="font-mono-sm text-tabular text-right">4,142</td>
      <td class="font-mono-sm text-tabular text-right">21.0%</td>
      <td class="font-mono-sm text-tabular text-right">4,470</td>
      <td class="font-mono-sm text-tabular text-right">21.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,685</td>
      <td class="font-mono-sm text-tabular text-right">21.6%</td>
      <td class="font-mono-sm text-tabular text-right">4,949</td>
      <td class="font-mono-sm text-tabular text-right">20.3%</td>
      <td class="font-mono-sm text-tabular text-right">4,198</td>
    </tr>
    <tr>
      <th scope="row">Budget Deficit</th>
      <td class="font-mono-sm text-tabular text-right">-3.5%</td>
      <td class="font-mono-sm text-tabular text-right">-665</td>
      <td class="font-mono-sm text-tabular text-right">-3.8%</td>
      <td class="font-mono-sm text-tabular text-right">-804</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-981</td>
      <td class="font-mono-sm text-tabular text-right">-4.6%</td>
      <td class="font-mono-sm text-tabular text-right">-1,008</td>
      <td class="font-mono-sm text-tabular text-right">-4.9%</td>
      <td class="font-mono-sm text-tabular text-right">-1,123</td>
      <td class="font-mono-sm text-tabular text-right">-2.9%</td>
      <td class="font-mono-sm text-tabular text-right">-483</td>
    </tr>
    <tr>
      <th scope="row">Debt Held by Public</th>
      <td class="font-mono-sm text-tabular text-right">76.0%</td>
      <td class="font-mono-sm text-tabular text-right">14,665</td>
      <td class="font-mono-sm text-tabular text-right">77.4%</td>
      <td class="font-mono-sm text-tabular text-right">15,688</td>
      <td class="font-mono-sm text-tabular text-right">79.2%</td>
      <td class="font-mono-sm text-tabular text-right">16,762</td>
      <td class="font-mono-sm text-tabular text-right">80.9%</td>
      <td class="font-mono-sm text-tabular text-right">17,872</td>
      <td class="font-mono-sm text-tabular text-right">83.1%</td>
      <td class="font-mono-sm text-tabular text-right">18,998</td>
      <td class="font-mono-sm text-tabular text-right">41.7%</td>
      <td class="font-mono-sm text-tabular text-right">8,065</td>
    </tr>
  </table>
</div>
<p>* in billions of dollars. Data for illustration purposes only.</p>