Using CSS we can easily style table columns. This is useful in cases where you may want table columns with a different colour, padding, font size etc and an obvious use of this would be a pricing or comparison table.

Column 1 Column 2 Column 3 Column 4
text text text text
text text text text

The CSS uses the CSS :nth-child() Selector and is supported in all modern browsers.

HTML Table Stack Columns (Stack Table td)

Another interesting thing you can do with HTML tables to make them more responsive is to stack the columns and again this can be achieved with some basic CSS.

Column 1 Column 2 Column 3 Column 4
text text text text
text text text text

Responsive HTML Table Columns

So the logical progression here is to make a responsive HTML table and that can be achieved with Media Queries.

Column 1 Column 2 Column 3 Column 4
text text text text
text text text text

Resize your browser to watch the table columns go from standard format to a stacked fluid layout. We've set our responsive breakpoint to 979px, but you can customise this figure to suit your needs.