How to make the first column of a row in black and the second column in red

Question

I would like to give a CSS class for a row, and I would like to make the first column black and the second column red. I do not want to use colgroup because it is an action specific to the row, not the whole table.

Answer 1

You can use:

td { color: black; } td:nth-child(2) { color: red; } 

Answer 2

This is possible without CSS3!

Example
http://jsfiddle.net/Q3yu5/1/

CSS

 tr.special_row td { background-color: #000; } tr.special_row td + td { background-color: #f00; } tr.special_row td+td+td { background-color: #fff; } 

HTML

 <table> <tr class="special_row"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> 

Answer 3

In CSS3, you can use the pseudo-class :nth-child() .

See Docs on how to use it.
In addition, as of early 2019, there is hardly any reason not to use CSS3 selectors .

Answer 4

... this is the action associated with the row, not the whole table.

Then applying different styles for the first and second columns of this row can be useful:

 <style type="text/css"> td.first { background-color: black; color: white; } td.second { background-color: red; color: white; } </style> <table> <tr> <td class="first">1st row, 1st column</td> <td class="second">1st row, 2nd column</td> </tr> <tr> <td>2nd row, 1st column</td> <td>2nd row, 2nd column</td> </tr> </table> 

Answer 5

You need to create 2 types of CSS.
For each line, you add the necessary CSS.