Customizing tables
There are now utility classes available to customize the look and feel or your tables. You can add borders, background stripes to row or columns, and align cell content to the top, bottom or middle of the cell.
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:
- Create your table as outlined in the Tables page. Make sure to add your headers for accessible tables.
- Click the Source button.
- Add the class name to your table and/or cell tag.

Borders
- class="vertical-border"
- class="horizontal-border"
Example: Horizontal border

Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Striped Rows and Columns:
- table class="su-table-striped-rows-odd"
- table class="su-table-striped-cols-odd"
- table class="su-table-striped-rows-even"
- table class="su-table-striped-cols-even"
Example: Striped Odd Rows

Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Align Content
- td class="vertical-align-top"
- td class="vertical-align-bottom"
Example: Cell content align top
Note: alignment classes must be applied to each cell.

Year | USA | CHN | RUS |
---|---|---|---|
2012 |
104 U.S. athletes left London with a total of 46 gold, 28 silver and 30 bronze. |
88 |
82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Add a "swipe" experience
table class="tablesaw-swipe"
Adding a "swipe" experience 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.
*Resize your viewport to across the 40em (640px) breakpoint to see the live change.
Movie Title | Rank | Year | Rating | Gross |
---|---|---|---|---|
Avatar | 1 | 2009 | 83% | $2.7B |
Titanic | 2 | 1997 | 88% | $2.1B |
The Avengers | 3 | 2012 | 92% | $1.5B |
Harry Potter and the Deathly Hallows—Part 2 | 4 | 2011 | 96% | $1.3B |
Frozen | 5 | 2013 | 89% | $1.2B |
Iron Man 3 | 6 | 2013 | 78% | $1.2B |
Transformers: Dark of the Moon | 7 | 2011 | 36% | $1.1B |
The Lord of the Rings: The Return of the King | 8 | 2003 | 95% | $1.1B |
Skyfall | 9 | 2012 | 92% | $1.1B |
Transformers: Age of Extinction | 10 | 2014 | 18% | $1.0B |
Examples
Striped Odd Rows
table class="su-table-striped-rows-odd"
Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Striped Odd Columns
table class="su-table-striped-cols-odd"
Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Vertical border
table class="vertical-border"
Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Striped Even Rows with cell content top aligned
table class="su-table-striped-rows-even"
td class="vertical-align-top"

Year | USA | CHN | RUS |
---|---|---|---|
2012 |
104 U.S. athletes left London with a total of 46 gold, 28 silver and 30 bronze. |
88 China's athletes left London with a total of 38 Gold, 31 Silver and 22 Bronze. |
82 Russia originally won 18 medals and eight golds in track and field. |
2008 |
110 U.S. athletes left with Beijing, China with 112 medals |
100 Chinese athletes left with Beijing, China with 110 medals. |
72 Russia athletes left with Beijing with 72 medals |
2004 |
103 |
62 |
92 |
Striped Even Columns
table class="su-table-striped-cols-even"
Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |
Horizontal border
table class="horizontal-border"
Year | USA | CHN | RUS |
---|---|---|---|
2012 | 104 | 88 | 82 |
2008 | 110 | 100 | 72 |
2004 | 103 | 62 | 92 |