Table: Scrollable

Ready

HTML
Notes
Context
Info


        
        <div class="usa-table-container--scrollable" tabindex="0">
    <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" tabindex="0">
    <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" tabindex="0">
    <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" tabindex="0">
    <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>

No notes defined.


        
            
            package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()

Handle: @table--scrollable
Preview:
- With layout
- Component only
Filesystem Path: src\components\table\table--scrollable.njk