Tables

Tables should be used for tabular data. For styling add the base class .table to any <table>. This will isolate our custom table styles. For ADA compliance tables are written using summary and caption.

Basic

Tables should be rendered with standard markup.

Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Basic Table</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Tables may also be used without its side borders (if applicable, based on theme). Just add the .side-borders-none class to a table or keyval chart and you will notice border-left and border-right properties will be set to none.

Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table side-borders-none" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Basic Table</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Accessibility

Tables have a lot of handy built-in features to make them more usable with screen readers. The key thing to remember is that vision-impaired users can't quickly scan a table like sighted users can. Typically, screen readers will read out the contents of a table one row at a time. Simpler tables with clear hierarchy and organization will be more easy to use for vision-impaired users.

Here are some things you can do to make your tables more accessible:

Define tables for data

Tables should almost always be used for actual data and not for creating page layouts. (You're using our awesome grid for layout anyway, right?) When a screen reader encounters a table, it runs a series of tests to determine if the table is a layout table or data table. The easiest way to define a table as being for data is by using <th> tags to define the headers of the table. Newer assistive software will also immediately interpret any table with the attribute role="grid" as being for data.

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<table class="table" role="grid">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Add a summary

The contents of a table can be described using the <caption> tag. However, you can also add the summary attribute to a table to further clarify its use. The summary attribute is specifically designed to explain a table to a vision-impaired user. If a table has both a summary and a caption, the summary should not simply restate the caption.

The W3C offers this example for a table detailing a bus schedule:

Table with summary and caption
Table Header Table Header Table Header Table Header
4:00 4:05 4:11 4:19 
<table class="table" summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
<caption class="show-for-sr">Table with summary and caption</caption>
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4:00</td>
            <td>4:05</td>
            <td>4:11</td>
            <td>4:19</td>
        </tr>
    </tbody>
</table>

Actionable

You may make an individual row appear actionable with the .actionable. When applied a row will highlight with an actionable color on hover.

Actionalbe Table Rows
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Actionalbe Table Rows</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr class="actionable">
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr class="actionable">
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
            <tr class="actionable">
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Keyval Charts

A key-val chart is a semi-tabular structure intended to display a set of key-value pairs.

  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<ul class="keyval-chart">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val">Amount</span>
    </li>
    <li>
        <span class="key">Rent</span>
        <span class="val">$14,800</span>
    </li>
    <li>
        <span class="key">Resident Service Fee</span>
        <span class="val">$51</val>
    </li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val">$90</val>
    </li>
</ul>

Actionable Key-val

  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<ul class="keyval-chart">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val">Amount</span>
    </li>
    <li class="actionable">
            <span class="key">Rent</span>
        <span class="val">$14,800</span>
    </li>
    <li class="actionable">
        <span class="key">Resident Service Fee</span>
        <span class="val">$51</val>
    </li>
    <li class="actionable">
        <span class="key">Cell Phone</span>
        <span class="val">$90</val>
    </li>
</ul>

Column Widths

By default, the .key and .val elements will render at a width of 50%. As certain contexts may require this width to be set explicitly, you may set the width of these columns using the .key-columns-n and .val-columns-n classes.

  • Expense Amount
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat vestibulum ultrices. Quisque venenatis nulla at ipsum vestibulum bibendum. Nunc et sem vel neque molestie lobortis non eu ex. In hac habitasse platea dictumst. Nam quis dapibus urna, vel interdum mauris. $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<ul class="keyval-chart key-columns-10 val-columns-2">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val text-right">Amount</span>
    </li>
    <li>
        <span class="key">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat vestibulum ultrices. Quisque venenatis nulla at ipsum vestibulum bibendum. Nunc et sem vel neque molestie lobortis non eu ex. In hac habitasse platea dictumst. Nam quis dapibus urna, vel interdum mauris. </span>
        <span class="val text-right">$14,800</span>
    </li>
    <li>
        <span class="key">Resident Service Fee</span>
        <span class="val text-right">$51</val>
    </li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val text-right">$90</val>
    </li>
</ul>

These values should be between 1 and the number of columns in your theme's grid. The example above contains values whose sum is 12, the number of columns in the grid by default.

Sortable Table

A sortable table is indicated by an arrow on the left of header column which is sortable. The sortable table header style includes the use of .sortable , .icon-arrow-down, .icon-arrow-up. (In this example javaScript is used to toggle the .sorted class and to sort the table. The UI Toolkit does not provide the javascript behind this action - only the style.)

Section table with groupings
Name Collection Document Type Upload Date
Mitchell's living will Estate Living Will Sep 10, 2015
Toyota Rav4 insurance statement Insurance Car Insurance Oct 20, 2015
478 Main St. Loan Financial Mortgage Nov 4, 2015
478 Main St. Loan Estate Power of Attorney Dec 5, 2015 
<table class="table sortable-table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Section table with groupings</caption>
    <thead>
        <tr>
            <th width="800" scope="col">Name</th>
            <th width="200" scope="col">Collection</th>
            <th width="300" class="sortable-table-header" scope="col"><a href="#">Document Type <span class="icon icon-arrow-down margin-left-small"></span></a></th>
            <th width="300" class="sortable-table-header sorted" scope="col"><a href="#">Upload Date <span class="icon icon-arrow-down margin-left-small"></span></a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mitchell's living will</td>
            <td>Estate</td>
            <td>Living Will</td>
            <td>Sep 10, 2015</td>
        </tr>
        <tr>
            <td>Toyota Rav4 insurance statement</td>
            <td>Insurance</td>
            <td>Car Insurance</td>
            <td>Oct 20, 2015</td>
        </tr>
        <tr>
            <td>478 Main St. Loan</td>
            <td>Financial</td>
            <td>Mortgage</td>
            <td>Nov 4, 2015</td>
        </tr>
        <tr>
        <td>478 Main St. Loan</td>
            <td>Estate</td>
            <td>Power of Attorney</td>
            <td>Dec 5, 2015</td>
        </tr>
    </tbody>
</table>

Group Headers

The table group header style includes the use of .table-group-header on the table row, a colspan value on the table column to span all columns, and a header (h5 recommended) with the group title inside the column. Adjust the padding by adding utility classes to the header element.

Section table with groupings
Name Collection Document Type Upload Date
Estate
Mitchell's living will Estate Living Will Sep 10, 2015
478 Main St. Loan Estate Power of Attorney Dec 5, 2015
Financial
478 Main St. Loan Financial Mortgage Nov 4, 2015
Insurance
Toyota Rav4 insurance statement Insurance Car Insurance Oct 20, 2015 
<table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Section table with groupings</caption>
    <thead>
        <tr>
            <th width="800" scope="col">Name</th>
            <th width="200" scope="col">Collection</th>
            <th width="300" scope="col">Document Type</th>
            <th width="300" scope="col">Upload Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-group-header">
            <td colspan="4"><h5 class="padding-top-small">Estate</h5></td>
        </tr>
        <tr>
            <td>Mitchell's living will</td>
            <td>Estate</td>
            <td>Living Will</td>
            <td>Sep 10, 2015</td>
        </tr>
        <tr>
            <td>478 Main St. Loan</td>
            <td>Estate</td>
            <td>Power of Attorney</td>
            <td>Dec 5, 2015</td>
        </tr>
        <tr class="table-group-header">
            <td colspan="4"><h5 class="padding-top-small">Financial</h5></td>
        </tr>
        <tr>
            <td>478 Main St. Loan</td>
            <td>Financial</td>
            <td>Mortgage</td>
            <td>Nov 4, 2015</td>
        </tr>
        <tr class="table-group-header">
            <td colspan="4"><h5 class="padding-top-small">Insurance</h5></td>
        </tr>
        <tr>
            <td>Toyota Rav4 insurance statement</td>
            <td>Insurance</td>
            <td>Car Insurance</td>
            <td>Oct 20, 2015</td>
        </tr>               
    </tbody>
</table>

Contextual Colors

You may also add contextual colors to table rows:

Basic Table
Table Header Table Header Table Header Table Header
Success Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Warning Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Info Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Alert Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Basic Table</caption>
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr class="success">
            <td><a href="#">Success Content Goes Here</a></td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr class="warning">
            <td><a href="#">Warning Content Goes Here</a></td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr class="info">
            <td><a href="#">Info Content Goes Here</a></td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr class="alert">
            <td><a href="#">Alert Content Goes Here</a></td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

<ul class="keyval-chart">
    <li class="chart-head">
        <span class="key">Key</span>
        <span class="val">Value</span>
    </li>
    <li class="success">
        <span class="key"><a href="#">Success</a></span>
        <span class="val">Content Goes Here</span>
    </li>
    <li class="warning">
        <span class="key"><a href="#">Warning</a></span>
        <span class="val">Content Goes Here</val>
    </li>
    <li class="info">
        <span class="key"><a href="#">Info</a></span>
        <span class="val">Content Goes Here</val>
    </li>
    <li class="alert">
        <span class="key"><a href="#">Alert</a></span>
        <span class="val">Content Goes Here</val>
    </li>
</ul>

Ghosting Tables

Ghosting Basic Tables

Tables can be used on dark backgrounds using the .ghost snf .ghost-children classes. See the ghosting section for more details on ghosting.

Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<div class="bg-off-black padding-medium">
    <table class="table ghost" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
    <caption class="show-for-sr">Basic Table</caption>
        <thead>
            <tr>
                <th width="500">Expenses</th>
                <th width="100" class="text-right">Amount</th>
                <th width="400">Frequency</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Rent</td>
                <td class="text-right">$1,480</td>
                <td>Monthly</td>
            </tr>
            <tr>
                <td>Resident Service Fee</td>
                <td class="text-right">$51</td>
                <td>Monthly</td>
            </tr>
            <tr>
                <td>Cell Phone</td>
                <td class="text-right">$90</td>
                <td>Monthly</td>
            </tr>
        </tbody>
    </table>
</div>

Ghosting Sortable Tables

Section table with groupings
Name Collection Document Type Upload Date
Mitchell's living will Estate Living Will Sep 10, 2015
Toyota Rav4 insurance statement Insurance Car Insurance Oct 20, 2015
478 Main St. Loan Financial Mortgage Nov 4, 2015
478 Main St. Loan Estate Power of Attorney Dec 5, 2015 
<div class="bg-off-black padding-medium">
    <table class="table sortable-table ghost" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
    <caption class="show-for-sr">Section table with groupings</caption>
        <thead>
            <tr>
                <th width="800" scope="col">Name</th>
                <th width="200" scope="col">Collection</th>
                <th width="300" class="sortable-table-header" scope="col"><a href="#">Document Type <span class="icon icon-arrow-down margin-left-small"></span></a></th>
                <th width="300" class="sortable-table-header sorted" scope="col"><a href="#">Upload Date <span class="icon icon-arrow-down margin-left-small"></span></a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mitchell's living will</td>
                <td>Estate</td>
                <td>Living Will</td>
                <td>Sep 10, 2015</td>
            </tr>
            <tr>
                <td>Toyota Rav4 insurance statement</td>
                <td>Insurance</td>
                <td>Car Insurance</td>
                <td>Oct 20, 2015</td>
            </tr>
            <tr>
                <td>478 Main St. Loan</td>
                <td>Financial</td>
                <td>Mortgage</td>
                <td>Nov 4, 2015</td>
            </tr>
            <tr>
            <td>478 Main St. Loan</td>
                <td>Estate</td>
                <td>Power of Attorney</td>
                <td>Dec 5, 2015</td>
            </tr>
        </tbody>
    </table>
</div>

Ghosting Actionable Key-val

  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<div class="bg-off-black padding-medium ghost-children">
    <ul class="keyval-chart">
        <li class="chart-head">
            <span class="key">Expense</span>
            <span class="val">Amount</span>
        </li>
        <li class="actionable">
                <span class="key">Rent</span>
            <span class="val">$14,800</span>
        </li>
        <li class="actionable">
            <span class="key">Resident Service Fee</span>
            <span class="val">$51</val>
        </li>
        <li class="actionable">
            <span class="key">Cell Phone</span>
            <span class="val">$90</val>
        </li>
    </ul>
</div>

Ghosting Group Headers

Section table with groupings
Name Collection Document Type Upload Date
Estate
Mitchell's living will Estate Living Will Sep 10, 2015
478 Main St. Loan Estate Power of Attorney Dec 5, 2015
Financial
478 Main St. Loan Financial Mortgage Nov 4, 2015
Insurance
Toyota Rav4 insurance statement Insurance Car Insurance Oct 20, 2015 
<div class="bg-off-black padding-medium">
    <table class="table ghost" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
        <caption class="show-for-sr">Section table with groupings</caption>
        <thead>
            <tr>
                <th width="800" scope="col">Name</th>
                <th width="200" scope="col">Collection</th>
                <th width="300" scope="col">Document Type</th>
                <th width="300" scope="col">Upload Date</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-group-header">
                <td colspan="4">
                    <h5 class="padding-top-small">Estate</h5>
                </td>
            </tr>
            <tr>
                <td>Mitchell's living will</td>
                <td>Estate</td>
                <td>Living Will</td>
                <td>Sep 10, 2015</td>
            </tr>
            <tr>
                <td>478 Main St. Loan</td>
                <td>Estate</td>
                <td>Power of Attorney</td>
                <td>Dec 5, 2015</td>
            </tr>
            <tr class="table-group-header">
                <td colspan="4">
                    <h5 class="padding-top-small">Financial</h5></td>
            </tr>
            <tr>
                <td>478 Main St. Loan</td>
                <td>Financial</td>
                <td>Mortgage</td>
                <td>Nov 4, 2015</td>
            </tr>
            <tr class="table-group-header">
                <td colspan="4">
                    <h5 class="padding-top-small">Insurance</h5></td>
            </tr>
            <tr>
                <td>Toyota Rav4 insurance statement</td>
                <td>Insurance</td>
                <td>Car Insurance</td>
                <td>Oct 20, 2015</td>
            </tr>
        </tbody>
    </table>
</div>

Ghosting Contextual Colors

Basic Table
Table Header Table Header Table Header Table Header
Success Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Warning Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Info Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Alert Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<div class="bg-off-black padding-medium ghost-children">
    <table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
    <caption class="show-for-sr">Basic Table</caption>
        <thead>
            <tr>
                <th width="200">Table Header</th>
                <th>Table Header</th>
                <th width="150">Table Header</th>
                <th width="150">Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td><a href="#">Success Content Goes Here</a></td>
                <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
                <td>Content Goes Here</td>
                <td>Content Goes Here</td>
            </tr>
            <tr class="warning">
                <td><a href="#">Warning Content Goes Here</a></td>
                <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
                <td>Content Goes Here</td>
                <td>Content Goes Here</td>
            </tr>
            <tr class="info">
                <td><a href="#">Info Content Goes Here</a></td>
                <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
                <td>Content Goes Here</td>
                <td>Content Goes Here</td>
            </tr>
            <tr class="alert">
                <td><a href="#">Alert Content Goes Here</a></td>
                <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
                <td>Content Goes Here</td>
                <td>Content Goes Here</td>
            </tr>
        </tbody>
    </table>

    <ul class="keyval-chart">
        <li class="chart-head">
            <span class="key">Key</span>
            <span class="val">Value</span>
        </li>
        <li class="success">
            <span class="key"><a href="#">Success</a></span>
            <span class="val">Content Goes Here</span>
        </li>
        <li class="warning">
            <span class="key"><a href="#">Warning</a></span>
            <span class="val">Content Goes Here</val>
        </li>
        <li class="info">
            <span class="key"><a href="#">Info</a></span>
            <span class="val">Content Goes Here</val>
        </li>
        <li class="alert">
            <span class="key"><a href="#">Alert</a></span>
            <span class="val">Content Goes Here</val>
        </li>
    </ul>
</div>

Scrollable Table

Add the .scrollable class and a height to the tbody element to make the table scrollable while keeping the header columns visible.

Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table scrollable" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Basic Table</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody style="height: 200px">
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Sticky Table Header

There are .sticky-wrap, .sticky-thead and .sticky-enabled classes available to enable sticky table headers. JavaScript is needed to implement this feature. The basic basic concept is to grab the table and wrap it in a .sticky-wrap container element. Then create a new <table> with the same classes as the original and clone the <thead> into it. Finally, set up some sort of event listener to resize/reposition the header as needed. The demo shown here is a simplified version of this codrops tuturial.

Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table sticky" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Basic Table</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!