How to style each table cell in a column via CSS?
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
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. */
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 stylingborder
,background
,width
andvisibility
(and their derivatives, such asbackground-color
). - The
border
declaration does not work unless the<table>
hasborder-collapse: collapse;
, and the behavior is inconsistent between browsers. - The
visibility
declaration does not work properly in Chrome due to a known bug.