Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Tables

Overview

Present data or content in a tabular format.

Preview

View Kitchen Sink

Tables are great for displaying tabular data. Minimal visual styling helps surface this information more easily.

[Table caption]
1A 1B 1C 1D
2A 2B 2C 2D
3A 3B 3C 3D

Variants and Examples

Styled <table> components use class="fsa-table", with several modifications available with fsa-table--[VARIANT].

Multiple modifying options are demonstrated for table rows (tr), table header cells (th), and table body cells (td) – along with sample use of other Design System components.

<table class="fsa-table fsa-table--[VARIANT]">
  ...
</table>

Default

[Table caption]
Barley $/Bushel 1.75 3.30 0.00
Canola $/Cwt. 8.94 15.99 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00
Oats $/Bushel 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 0.00 
<table class="fsa-table">
  <caption>[Table caption]</caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Commodity</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Loan Rate</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate ($)</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Barley $/Bushel</td>
      <td class="fsa-text-align--right">1.75</td>
      <td class="fsa-text-align--right">3.30</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Canola $/Cwt.</td>
      <td class="fsa-text-align--right">8.94</td>
      <td class="fsa-text-align--right">15.99</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Flaxseed $/Cwt.</td>
      <td class="fsa-text-align--right">10.13</td>
      <td class="fsa-text-align--right">15.90</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Oats $/Bushel</td>
      <td class="fsa-text-align--right">1.43</td>
      <td class="fsa-text-align--right">2.97</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Wheat - Soft Red Winter $/Bushel</td>
      <td class="fsa-text-align--right">2.42</td>
      <td class="fsa-text-align--right">4.49</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
  </tbody>
</table>

Customize caption

The <caption>’s default presentation does not provide a hierarchical context. An <hN> element can be nested within to provide a stronger heading structure and clear visual hierarchy while providing stricter access through the <caption> element.

[Table caption as an <h2>]
Barley $/Bushel 1.75 3.30 0.00
Canola $/Cwt. 8.94 15.99 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00
Oats $/Bushel 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 0.00 
<table class="fsa-table">
  <caption>
    <h2>[Table caption as an &lt;h2&gt;]</h2>
  </caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Commodity</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Loan Rate</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate ($)</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Barley $/Bushel</td>
      <td class="fsa-text-align--right">1.75</td>
      <td class="fsa-text-align--right">3.30</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Canola $/Cwt.</td>
      <td class="fsa-text-align--right">8.94</td>
      <td class="fsa-text-align--right">15.99</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Flaxseed $/Cwt.</td>
      <td class="fsa-text-align--right">10.13</td>
      <td class="fsa-text-align--right">15.90</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Oats $/Bushel</td>
      <td class="fsa-text-align--right">1.43</td>
      <td class="fsa-text-align--right">2.97</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Wheat - Soft Red Winter $/Bushel</td>
      <td class="fsa-text-align--right">2.42</td>
      <td class="fsa-text-align--right">4.49</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
  </tbody>
</table>

Borderless

Caption that is hidden visually, but read by screenreader
Oats $/Bushel 1.43 2.97 0.00
Barley $/Bushel 1.75 3.30 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 0.00
Canola $/Cwt. 8.94 15.99 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 
<table class="fsa-table fsa-table--borderless">
  <caption class="sr-only">Caption that is hidden visually, but read by screenreader</caption>
  <thead>
    <tr>
      <th scope="col"><button class="fsa-table__sort" type="button">Commodity</button></th>
      <th scope="col" class="fsa-text-align--right" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Loan Rate</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate ($)</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oats $/Bushel</td>
      <td class="fsa-text-align--right">1.43</td>
      <td class="fsa-text-align--right">2.97</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Barley $/Bushel</td>
      <td class="fsa-text-align--right">1.75</td>
      <td class="fsa-text-align--right">3.30</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Wheat - Soft Red Winter $/Bushel</td>
      <td class="fsa-text-align--right">2.42</td>
      <td class="fsa-text-align--right">4.49</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Canola $/Cwt.</td>
      <td class="fsa-text-align--right">8.94</td>
      <td class="fsa-text-align--right">15.99</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Flaxseed $/Cwt.</td>
      <td class="fsa-text-align--right">10.13</td>
      <td class="fsa-text-align--right">15.90</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
  </tbody>
</table>

Plain

Omitting the default class="fsa-table" outright renders a non-styled table, effectively “resetting” it.

[Table caption]
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00
Oats $/Bushel 1.43 2.97 1.92 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00 
<table>
  <caption>[Table caption]</caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Commodity</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Loan Rate</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Alternative PCP</button></th>
      <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate ($)</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Barley $/Bushel</td>
      <td class="fsa-text-align--right">1.75</td>
      <td class="fsa-text-align--right">3.30</td>
      <td class="fsa-text-align--right">2.60</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Canola $/Cwt.</td>
      <td class="fsa-text-align--right">8.94</td>
      <td class="fsa-text-align--right">15.99</td>
      <td class="fsa-text-align--right">15.89</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Flaxseed $/Cwt.</td>
      <td class="fsa-text-align--right">10.13</td>
      <td class="fsa-text-align--right">15.90</td>
      <td class="fsa-text-align--right">14.62</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Oats $/Bushel</td>
      <td class="fsa-text-align--right">1.43</td>
      <td class="fsa-text-align--right">2.97</td>
      <td class="fsa-text-align--right">1.92</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
    <tr>
      <td>Wheat - Soft Red Winter $/Bushel</td>
      <td class="fsa-text-align--right">2.42</td>
      <td class="fsa-text-align--right">4.49</td>
      <td class="fsa-text-align--right">4.19</td>
      <td class="fsa-text-align--right">0.00</td>
    </tr>
  </tbody>
</table>

Vertical Align: Middle

Lorem ipsum dolor sit amet consec tetur Lorem Ipsum Dolor Sitaw Ametg Conse Adipi Accus Omnisi Aliqum Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi 
<table class="fsa-table fsa-table--borderless fsa-table--valign-middle">
  <thead>
    <tr>
      <th>Lorem ipsum dolor sit amet consec tetur</th>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
      <th>Sitaw</th>
      <th>Ametg</th>
      <th>Conse</th>
      <th>Adipi</th>
      <th>Accus</th>
      <th>Omnisi</th>
      <th>Aliqum</th>
      <th>Rerum odio volupt atibus eligendi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet consec tetur</td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>Rerum odio volupt atibus eligendi</th>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet consec tetur</td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>Rerum odio voluptatibus eligendi</th>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet consec tetur</td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>Rerum odio voluptatibus eligendi</th>
    </tr>
  </tbody>
</table>

Vertical Align: Bottom

Lorem ipsum dolor sit amet consec tetur Lorem Ipsum Dolor Sitaw Ametg Conse Adipi Accus Omnisi Aliqum Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi 
<table class="fsa-table fsa-table--borderless fsa-table--valign-bottom">
  <thead>
    <tr>
      <th>Lorem ipsum dolor sit amet consec tetur</th>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
      <th>Sitaw</th>
      <th>Ametg</th>
      <th>Conse</th>
      <th>Adipi</th>
      <th>Accus</th>
      <th>Omnisi</th>
      <th>Aliqum</th>
      <th>Rerum odio volupt atibus eligendi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet consec tetur</td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>Rerum odio volupt atibus eligendi</th>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet consec tetur</td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>Rerum odio voluptatibus eligendi</th>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet consec tetur</td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>Rerum odio voluptatibus eligendi</th>
    </tr>
  </tbody>
</table>
top header cell top header cell top header cell top header cell top header cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Terminal Markets: Commodities
Market HRW HRS SRW WHI HAD YC BRL OAT YSB SOR
Average 4.22 5.60 3.98 4.54 7.24 3.63 3.29 3.08 9.67 6.16
AMA 3.22 3.64
AMA 3.22 3.64
CIN 3.90 3.42 9.62 6.00
EVN 4.05
GLF 4.67 4.65 3.88 3.44 10.12 6.92
KCM 4.33 3.35 3.14 3.05 9.43
LOS 7.11
MEM 3.91 3.59 9.79 5.69
MIN 4.27 5.73 7.35 2.99 2.85 2.79 8.98 5.69
NCD 5.48 5.25
PNW 4.92 4.81 7.35 4.31 3.19 3.37 10.61
SCD 5.33
TOL 4.06 4.06 3.34 9.36
TKO 3.62 9.48
WCD 4.93 4.76 7.15 4.46 3.94 8.28

Select Multiple Rows

Inspections
Kansas Cowley 3510 Norm Peterson
Complete
Kansas Johnson 8787 Carla Tortelli
Assigned
Missouri Jackson 8080 Ernie Pantusso
Rejected
California Ventura 5644 not assigned
Not Started
California Los Angeles 6662 Diane Chambers
In Progress
California San Bernardino 6664 not assigned
On Hold
Kansas Miami 7510 Woody Boyd
Complete
Maryland Anne Arundel 1325 Woody Boyd
In Progress
Oregon Clackamas 1196 not assigned
Not Started

Select a Single Row

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00
Oats $/Bushel 1.43 2.97 1.92 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00

Scrollable

Wrapping a table in a fsa-table-container--scroll automatically provides a scrollable region content exceeding its bounds.

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate [col] [col] [col] [col] [col] [col] [col] [col] [col]
Barley $/Bushel 3.30 2.60 1.75 3.30 2.60 0.00 1.75 0.00 3.30 2.60 0.00 1.75 0.00
Canola $/Cwt. 8.94 8.94 15.89 0.00 15.89 8.94 8.94 15.89 0.00 15.89 15.99 15.99 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00 10.13 15.90 15.90 0.00 0.00 10.13 15.90 14.62 14.62
Oats $/Bushel 1.92 1.43 2.97 0.00 0.00 1.92 1.43 2.97 0.00 0.00 1.43 2.97 1.92
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00 2.42 4.49 4.19 4.19 0.00 2.42 4.49 4.49 0.00 
<div class="fsa-table-container--scroll fsa-border--xxs">
  <table class="fsa-table fsa-table--borderless">
    <caption class="sr-only">Caption that is hidden visually, but read by screenreader</caption>
    <thead>
      <tr>
        <th scope="col">Commodity</th>
        <th scope="col" class="fsa-text-align--right">Loan Rate</th>
        <th scope="col" class="fsa-text-align--right">30-Day Period PCP</th>
        <th scope="col" class="fsa-text-align--right">Alternative PCP</th>
        <th scope="col" class="fsa-text-align--right">Effective LDP Rate</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
        <th scope="col" class="fsa-text-align--right">[col]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">15.99</td>
        <td class="fsa-text-align--right">15.99</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">14.62</td>
        <td class="fsa-text-align--right">14.62</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">1.92</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.49</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.49</td>
        <td class="fsa-text-align--right">4.49</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
    </tbody>
  </table>
</div>

Scrollable: Custom Height

This example sets a max-height of 33vh (effectively “33% of viewport’s height”), forcing a vertical scroll. Accepts most units, e.g. rem, px, em, etc.

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00 
<div class="fsa-table-container--scroll fsa-border--xxs" style="--custom-table-height: 33vh;">
  <table class="fsa-table fsa-table--borderless">
    <caption class="sr-only">Caption that is hidden visually, but read by screenreader</caption>
    <thead>
      <tr>
        <th scope="col" class="fsa-table__th--sticky">Commodity</th>
        <th scope="col" class="fsa-text-align--right fsa-table__th--sticky">Loan Rate</th>
        <th scope="col" class="fsa-text-align--right fsa-table__th--sticky">30-Day Period PCP</th>
        <th scope="col" class="fsa-text-align--right fsa-table__th--sticky">Alternative PCP</th>
        <th scope="col" class="fsa-text-align--right fsa-table__th--sticky">Effective LDP Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Barley $/Bushel</td>
        <td class="fsa-text-align--right">3.30</td>
        <td class="fsa-text-align--right">2.60</td>
        <td class="fsa-text-align--right">1.75</td>
        <td class="fsa-text-align--right">3.30</td>
      </tr>
      <tr>
        <td>Canola $/Cwt.</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">8.94</td>
        <td class="fsa-text-align--right">15.89</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Flaxseed $/Cwt.</td>
        <td class="fsa-text-align--right">10.13</td>
        <td class="fsa-text-align--right">15.90</td>
        <td class="fsa-text-align--right">0.00</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Oats $/Bushel</td>
        <td class="fsa-text-align--right">1.92</td>
        <td class="fsa-text-align--right">1.43</td>
        <td class="fsa-text-align--right">2.97</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
      <tr>
        <td>Wheat - Soft Red Winter $/Bushel</td>
        <td class="fsa-text-align--right">2.42</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">4.19</td>
        <td class="fsa-text-align--right">0.00</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive

Each table variant above can be made to fit on smaller viewports (i.e. mobile phones) via class="fsa-table--responsive" or class="fsa-table--responsive fsa-table--responsive-horizontal". In addition to the previewed images below, view this page on a smaller device (Phone, Tablet, etc) to view the below Responsive variants.

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Structure

  • Responsive table styles are identical at the smaller breakpoints regardless of initial variant used.
  • The key to Responsive Tables is the use of the aria-label attribute on each data data cell, e.g. <td aria-label="Commodity">...</td> to replicate each column header (th).

Default

View on a narrow screen or device to fully appreciate Responsive Web Design rendering

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate ($)
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Oats $/Bushel 1.43 2.97 1.92 0.00 
<table class="fsa-table fsa-table--responsive">
  <caption class="sr-only">Caption that is hidden visually, but read by screenreader</caption>
  <thead>
    <tr>
      <th scope="col">Commodity</th>
      <th scope="col" class="fsa-text-align--right">Loan Rate</th>
      <th scope="col" class="fsa-text-align--right">30-Day Period PCP</th>
      <th scope="col" class="fsa-text-align--right">Alternative PCP</th>
      <th scope="col" class="fsa-text-align--right">Effective LDP Rate ($)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td aria-label="Commodity">Barley $/Bushel</td>
      <td class="fsa-text-align--right" aria-label="Loan Rate">1.75</td>
      <td class="fsa-text-align--right" aria-label="30-Day Period PCP">3.30</td>
      <td class="fsa-text-align--right" aria-label="Alternative PCP">2.60</td>
      <td class="fsa-text-align--right" aria-label="Effective LDP Rate ($)">0.00</td>
    </tr>
    <tr>
      <td aria-label="Commodity">Canola $/Cwt.</td>
      <td class="fsa-text-align--right" aria-label="Loan Rate">8.94</td>
      <td class="fsa-text-align--right" aria-label="30-Day Period PCP">15.99</td>
      <td class="fsa-text-align--right" aria-label="Alternative PCP">15.89</td>
      <td class="fsa-text-align--right" aria-label="Effective LDP Rate ($)">0.00</td>
    </tr>
    <tr>
      <td aria-label="Commodity">Oats $/Bushel</td>
      <td class="fsa-text-align--right" aria-label="Loan Rate">1.43</td>
      <td class="fsa-text-align--right" aria-label="30-Day Period PCP">2.97</td>
      <td class="fsa-text-align--right" aria-label="Alternative PCP">1.92</td>
      <td class="fsa-text-align--right" aria-label="Effective LDP Rate ($)">0.00</td>
    </tr>
  </tbody>
</table>

Horizontal

View on a narrow screen or device to fully appreciate Responsive Web Design rendering

Caption that is hidden visually, but read by screenreader
Declaration of Independence Statement 1776
Bill of Rights The first ten amendments 1791
Emancipation Proclamation Executive order granting freedom to slaves in designated southern states. 1863 
<table class="fsa-table fsa-table--responsive fsa-table--responsive-horizontal">
  <caption class="sr-only">Caption that is hidden visually, but read by screenreader</caption>
  <thead>
    <tr>
      <th scope="col"><button class="fsa-table__sort" type="button">Document title</button></th>
      <th scope="col"><button class="fsa-table__sort" type="button">Description</button></th>
      <th scope="col" aria-sort="ascending" class="fsa-text-align--right"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Year</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th aria-label="Document title" scope="row">Declaration of Independence</th>
      <td aria-label="Description">Statement</td>
      <td aria-label="Year" class="fsa-text-align--right">1776</td>
    </tr>
    <tr>
      <th aria-label="Document title" scope="row">Bill of Rights</th>
      <td aria-label="Description">The first ten amendments</td>
      <td aria-label="Year" class="fsa-text-align--right">1791</td>
    </tr>
    <tr>
      <th aria-label="Document title" scope="row">Emancipation Proclamation</th>
      <td aria-label="Description">Executive order granting freedom to slaves in designated southern states.</td>
      <td aria-label="Year" class="fsa-text-align--right">1863</td>
    </tr>
  </tbody>
</table>

Usage

Use

  • When you need to display tabular information, such as statistical data.

Don’t Use

UX Pattern
Action Bar with Table
Complement a data table with actions and pagination.
UX Pattern
Destroy Prompt
Prompt users to the implications of a destructive action.

Accessibility

Always refer to the Accessibility Tables Guide for overall guidance.

  • Note use of aria attributes for declaring by which column a table is sorted, and in which direction, descending or ascending.
  • The caption element is required, as demonstrated is each example on this page. Some are visually hidden, though remain available to screenreaders; others have been visually modified to convey a visual hierarchy.
  • Simple tables can have two levels of headers. Each header cell (th) should have scope="col" or scope="row".
  • Complex tables are tables with more than two levels of headers. Each header should be given a unique id and each data cell should have a headers attribute with each related header cell’s id listed.
Return to top