Table Description

The table can have from eight to sixteen columns and up to one hundred rows. There are options for a contrasting font and background color for the table head. The border width and color can be adjusted along with the cell padding and the vertical spacing.
Layout
The table has both a maximum width and minimum width setting. The maximum width prevents it spreading out too wide on large screens and the minimum width is set to prevent the table cells from being too small at narrower browser widths.
When the browser or device width reaches the minimum width setting, overflow on the X-axis kicks in. The table can then be scrolled horizontally.
Mobile Layout
A table with this number of columns would be pretty much useless for mobile phone users. This table switches to a list style layout on these devices.
At this width, the table head is hidden and the info is inserted in each list item in bold using data attributes. This table uses Javascript - rather than CSS - to add data attributes using a jQuery plugin.
Alternatives
For tables with fewer columns and better styling options, follow the links below.