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

Html Problem Overview

I have an ordinary HTML table:

<table>
  <tr>
    <td class="first-column-style">FAT</td> 
    <td>...</td>
  </tr>
  <tr>
    <td class="first-column-style">FAT</td>
    <td>...</td>
  </tr>
</table>

I want to apply CSS style to every table cell (td) in a particular column. Is it possible to do that without applying the class/style attribute to every table cell in that column, and without JavaScript?

Html Solutions

Solution 1 - Html

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 - Html

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 - Html

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.

Solution 4 - Html

Well for the first and last columns you can use the :first-child and :last-child pseudo class:

/* make the first cell of every row bold */
tr td:FIRST-CHILD{
    font-weight:bold;
}

/* make the last cell of every row italic */
tr td:LAST-CHILD{
    font-style:italic;
}

Reference:

[:first-child and :last-child][1]

[1]: http://www.quirksmode.org/css/firstchild.html "QuirksMode: :first-child and :last-child"

Solution 5 - Html

The following allows you to style columns at table level, and can be used in a more general way to the previous examples, as you don't have to make assumptions about the styles applied to a given column index within the style sheet itself.

I agree that the <col> approach is best if it fits your needs, but the range of styles is very limited.

The sample styles column 1, 2, & 4 with a grey text style.

HTML

<table class="example col1-readonly col2-readonly col4-readonly">

CSS

.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
    color:#555;
}

Solution 6 - Html

This is an old post. But I had the same question. Found this to be working:

<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>

This style setting sets the background color to red in the third row and second column,

Content Type	Original Author	Original Content on Stackoverflow
Question	Andrew Florko	View Question on Stackoverflow
Solution 1 - Html	Nelson	View Answer on Stackoverflow
Solution 2 - Html	RoToRa	View Answer on Stackoverflow
Solution 3 - Html	Deniz Dogan	View Answer on Stackoverflow
Solution 4 - Html	Sean Patrick Floyd	View Answer on Stackoverflow
Solution 5 - Html	Sprotty	View Answer on Stackoverflow
Solution 6 - Html	Niels Henrik Bruun	View Answer on Stackoverflow