How to style each table cell in a column via CSS?

Solution 1:

2015 answer, and based on the first-child answer but MUCH cleaner.

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }

Super clean code

Solution 2:

Additionally to Sean Patrick Floyd's solution you can combine :first-child with the adjacent sibling selector + (also not supported by IE6):

td:first-child { /* first column */ }

td:first-child + td { /* second column */ }

td:first-child + td + td { /* third column */ }

/* etc. */

Solution 3:

Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each <td> in the table.

Caveats:

• Any row or cell styling will supersede column styling.
• The <col> tag only supports styling border, background, width and visibility (and their derivatives, such as background-color).
• The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
• The visibility declaration does not work properly in Chrome due to a known bug.