gallerycss-csstables

Simple CSS for HTML Tables

Default Table

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

Bordered Table

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

Table with Horizontal Borders

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

Striped Table

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

Nth Child Selector Styling

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

Simple Table with plain header

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