Style HTML Table Columns

Glenn Blog Leave a Comment

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.


td:nth-child(1) { /* first table column */ background: red;}
td:nth-child(2) { /* second table column */ background: green;}
td:nth-child(3) { /* third table column */ background: blue;}
td:nth-child(4) { /* fourth table column */ background: yellow;}

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

The CSS here is simply changing the table td from its default display ‘table-cell’ state to a display ‘block’.

.stack-cols td {
    min-height: 40px;
    display:block; 
    box-sizing:border-box; 
    clear:both
}

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
@media (max-width: 979px) {
.responsive-cols td {
    display:block; 
    box-sizing:border-box; 
    clear:both;
}
}

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.

About the Author
html table style columns Style HTML Table Columns 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.