Add the pure-table
classname to a table to style an HTML table This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.
# | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |
To add horizontal and vertical borders to all cells, add the pure-table-bordered
classname to the table
element.
# | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |
If you prefer to just have horizontal lines, add the pure-table-horizontal
classname to the table
element.
# | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |
Large tables are easier to parse visually if rows are easily distinguishable. Adding the pure-table-odd
class name to every other tr
element changes the background of the row and creates a zebra-styled effect.
# | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |
4 | Ford | Focus | 2008 |
5 | Nissan | Sentra | 2011 |
6 | BMW | M3 | 2009 |
7 | Honda | Civic | 2010 |
8 | Kia | Soul | 2010 |
Here's a striped table that's zebra-styled using nth-child
selectors.
# | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |
4 | Ford | Focus | 2008 |
5 | Nissan | Sentra | 2011 |
6 | BMW | M3 | 2009 |
7 | Honda | Civic | 2010 |
8 | Kia | Soul | 2010 |