Customize tables

There are now utility classes available to customize the look and feel of your tables. You can add borders and background stripes to row or columns; align cell content, to the top, bottom or middle of the cell; and an alternate swipe experience. 

For these customizations, you will edit the source HTML directly. Learn about editing source code.

Note: By default, the table layout is responsive to the user's screen-size and will fold into a two column layout with headers on the left for viewport that is 640px or less. This may cause some utility classes to be idle in mobile view. *Resize your viewport to across the 40em (640px) breakpoint to see the responsive table style live. 

Steps for adding classes:

These are the general steps for using utility classes to customize tables. 

1. Create your table as outlined in the Tables page. 
2. Confirm that you have column and possibly row headers. Headers are required for these utility classes to work.
3. Click the Source button. (Learn about editing source code.)
4. For a table class, add the class to the <table> tag 
   i.e., <table class="su-table-striped-rows-odd">
5. For a table cell, add the class to all the <td> tags. 
   i.e., <td class="vertical-align-top">

Borders

To add borders to all the rows and/or columns in your table, use the following classes in your <table> tag

1. class="vertical-border"
2. class="horizontal-border"
3. class="vertical-border horizontal-border"

Example: Horizontal border

Example: Vertical border

Example: Vertical and Horizontal border

Striped Rows and Columns:

To add row or column stripes, use the following classes in your <table> tag.

1. class="su-table-striped-rows-odd" 
2. class="su-table-striped-cols-odd" 
3. class="su-table-striped-rows-even" 
4. class="su-table-striped-cols-even" 

Example: Striped Odd Rows

Example: Striped Odd Columns

Align Content

By default, content is vertically aligned in the middle of a table cell. To change that alignment, use the following classes on the <td> tag.

1. class="vertical-align-top"
2. class="vertical-align-bottom"

Note: These alignment classes are applied on a cell by cell basis. That is, the class must be applied to each <td> tag.

Example: Cell content align top

Example: Cell content align bottom

Add a "swipe" experience

By default in smaller viewports, tables will break into rows. The "swipe" experience changes that; it maintains the table layout and uses multiple displays for column data. This allows for direct manipulation of the table on your user's screen. The content of the table isn't compromised when a user adjusts their browser window. To add the swipe experience use the tablesaw-swipe class in your <table> tag.

class="tablesaw-swipe"

Example: Swipe experience in a smaller viewport

At smaller viewport sizes the table will be broken into multiple displays. For example, with smaller viewport size, the first through forth columns of the table display first. Clicking on the next column button displays the second through fifth columns.

Try the Swipe experience

To see this change live, resize your viewport to across the 40em (640px) breakpoint.

Troubleshooting

Utility classes are not working

If the utility classes are not working, check that your table is built with column headers. Without the column headers, these utility classes will not work.  
Learn more about editing tables