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.

See examples

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

Olympic Medals, country by the year
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

Olympic Medals, country by the year
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.

Olympic Medals, country by the year
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"

Olympic Medals, country by the year
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"

Olympic Medals, country by the year
Year	USA	CHN	RUS
2012	104	88	82
2008	110	100	72
2004	103	62	92

Vertical border

table class="vertical-border"

Olympic Medals, country by the year
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"

Olympic Medals, country by the year
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"

Olympic Medals, country by the year
Year	USA	CHN	RUS
2012	104	88	82
2008	110	100	72
2004	103	62	92

Horizontal border

table class="horizontal-border"

Olympic Medals, country by the year
Year	USA	CHN	RUS
2012	104	88	82
2008	110	100	72
2004	103	62	92