Add the k-table
classname to a table to style an HTML table similar to how a YUI 3 Datatable would be styled. 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 k-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 k-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 k-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 |
To remove the styled header, simply add the k-thead-simple
class name to the thead
element. You can mix and match this with other table class names mentioned above.
# | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |