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.

EXAMPLE

Show Code

 
<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>
Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly

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.

EXAMPLE

Show Code

 
<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>
Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly

Sub-Tables

Sub-Tables

Sub-tables can be used alongside basic tables (and keyvals as shown below). Sub-tables should be structured by using a separate <tbody> nested inside the <table> tags. Then, you may apply the .has-sub-table class on the <table> tag, and the .sub-table class on the <tbody> that you wish to make a sub-table.

*Note: Be sure to add the proper colspan settings to the first column in the parent table. A sub-table will create an extra column of :before content, so this step is crucial for formatting.

EXAMPLE

Show Code

 
<table class="table has-sub-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" colspan="2">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td colspan="2">Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td colspan="2">Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
    <tbody class="sub-table">
        <tr>
            <td>Expense 1</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Expense 2</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Expense 3</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>
Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly
Expense 1 $1,480 Monthly
Expense 2 $51 Monthly
Expense 3 $90 Monthly

Sub-Table Accordions

The .sub-table-accordion class may be added the the preceeding sibling <tbody> of the sub-table that you'd like to collapse/expand. This will append the icon in the last table row. At the same time, you will want to add .sub-table-hide in order to have the sub-table collapsed on page load. You will need use the .sub-table-hide class to toggle on and off in order to show and hide the sub-table itself. You will need to change <td> widths accordingly, since the icon will be added as a column of :before content. *Note: JS toggle functionality does not come with classes out of the box.

EXAMPLE

Show Code

 
<table class="table has-sub-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" colspan="2">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody class="sub-table-accordion sub-table-hide">
        <tr>
            <td colspan="2">Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td colspan="2">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>
    <tbody class="sub-table">
        <tr>
            <td>Expense 1</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Expense 2</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Expense 3</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
    <tbody class="sub-table-accordion sub-table-hide">
        <tr>
            <td width="50%">Living</td>
            <td width="10%" class="text-right">$1,480</td>
            <td width="40%">Monthly</td>
        </tr>
    </tbody>
    <tbody class="sub-table">
        <tr>
            <th>Expenses</th>
            <th class="text-right">Amount</th>
            <th>Frequency</th>
        </tr>
        <tr>
            <td>Expense 4</td>
            <td class="text-right">$1,590</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Expense 5</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Expense 6</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>
Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly
Expense 1 $1,480 Monthly
Expense 2 $51 Monthly
Expense 3 $90 Monthly
Living $1,480 Monthly
Expenses Amount Frequency
Expense 4 $1,590 Monthly
Expense 5 $51 Monthly
Expense 6 $90 Monthly

Sub-Keyvals

Sub-Keyval Charts

*Note: Unlike sub-tables, sub-keyval charts do not require the .has-sub-table class. To apply a sub-keyval chart, simply apply create a sibling <ul>, and add the .sub-keyval class to the desired <ul> tag.

EXAMPLE

Show Code

 
<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
    </span></li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
<ul class="keyval-chart sub-keyval">
    <li>
        <span class="key" colspan="2">Rent</span>
        <span class="val">$14,800</span>
    </li>
    <li>
        <span class="key" colspan="2">Resident Service Fee</span>
        <span class="val">$51
    </span></li>
    <li>
        <span class="key" colspan="2">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90

Sub-Keyval Accordions

EXAMPLE

Show Code

 
<ul class="keyval-chart sub-keyval-accordion sub-keyval-hide">
    <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
    </span></li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
<ul class="keyval-chart sub-keyval">
    <li>
        <span class="key" colspan="2">Rent</span>
        <span class="val">$14,800</span>
    </li>
    <li>
        <span class="key" colspan="2">Resident Service Fee</span>
        <span class="val">$51
    </span></li>
    <li>
        <span class="key" colspan="2">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90

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.

EXAMPLE

Show Code

 
<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>
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

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:

EXAMPLE

Show Code

 
<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>
Table with summary and caption
Table Header Table Header Table Header Table Header
4:00 4:05 4:11 4:19

Actionable

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

EXAMPLE

Show Code

 
<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>
Actionalbe Table Rows
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly

Keyval Charts

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

EXAMPLE

Show Code

 
<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
    </span></li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90

Actionable Key-val

EXAMPLE

Show Code

 
<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
    </span></li>
    <li class="actionable">
        <span class="key">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90

Column Widths

By default, the .key and .val classes on elements will render at a default 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-# and .val-columns-# classes (where # is a number from 1 - 12). The idea behind how to implement this feature is based in the 12 column grid.

EXAMPLE

Show Code

 
<ul class="keyval-chart key-columns-5 val-columns-7">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val">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">$14,800</span>
    </li>
    <li>
        <span class="key">Resident Service Fee</span>
        <span class="val">$51
    </span></li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val">$90
    </span></li>
</ul>
  • 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

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.)

EXAMPLE

Show Code

 
<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&apos;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>
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

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.

EXAMPLE

Show Code

 
<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&apos;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>
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

Contextual Colors

You may also add contextual colors to table rows:

EXAMPLE

Show Code

 
<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
    </span></li>
    <li class="info">
        <span class="key"><a href="#">Info</a></span>
        <span class="val">Content Goes Here
    </span></li>
    <li class="alert">
        <span class="key"><a href="#">Alert</a></span>
        <span class="val">Content Goes Here
    </span></li>
</ul>
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

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.

EXAMPLE

Show Code

 
<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>
Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly

Ghosting Sortable Tables

EXAMPLE

Show Code

 
<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&apos;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>
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

Ghosting Actionable Key-val

EXAMPLE

Show Code

 
<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
        </span></li>
        <li class="actionable">
            <span class="key">Cell Phone</span>
            <span class="val">$90
        </span></li>
    </ul>
</div>
  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90

Ghosting Group Headers

EXAMPLE

Show Code

 
<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&apos;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>
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

Ghosting Contextual Colors

EXAMPLE

Show Code

 
<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
        </span></li>
        <li class="info">
            <span class="key"><a href="#">Info</a></span>
            <span class="val">Content Goes Here
        </span></li>
        <li class="alert">
            <span class="key"><a href="#">Alert</a></span>
            <span class="val">Content Goes Here
        </span></li>
    </ul>
</div>
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

Scrollable Table

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

EXAMPLE

Show Code

 
<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>
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

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 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 tutorial.

EXAMPLE

Show Code

 
<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>
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

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!