Using CSS how to change only the 2nd column of a table

Question

Using css only, how can I override the css of only the 2nd column of a table.

I can get to all of the columns using:

.countTable table table td

I can not get to the html on this page to modify it since it is not my site.

Thanks.

score 283 · Accepted Answer · answered Mar 29 '10 at 00:04

283

You can use the :nth-child pseudo class like this:

.countTable table table td:nth-child(2)

Note though, this won't work in older browsers (or IE), you'll need to give the cells a class or use javascript in that case.

answered Mar 29 '10 at 00:04

Nick Craver

623,446
136
1,297
1,155

This will only give the second cell in each table, not the second cell in each row. You need .countTable table table tr td:nth-child(2) – Deeksy Mar 29 '10 at 00:13
3

@Deeksy - That's not accurate, it doesn't care what the selector is. `nth-child` is applied after finding the element, and it's `nth` compared to whatever parent it has, no matter if it was in the selector or not. You can see this working here: http://jsfiddle.net/JQQPz/ – Nick Craver Mar 29 '10 at 00:19
how about changing only the css of an element inside td:nth-child(2). Like tag. is it going to be td a:nth-child(2){} ? – Ivo San Jun 21 '13 at 06:46
1

@ivory-santos just add the `a` at the end, e.g. `td:nth-child(2) a` to style links beneath that element. – Nick Craver Jun 21 '13 at 10:10
Why do you have table twice (unlike other answers below)? – UlFie Jun 04 '19 at 14:39
@UlFie See the original question's selector :) – Nick Craver Jun 05 '19 at 10:30
Found this, 10 years later. Would just like to note that IE 11 indeed supports nth-child(2). – Jonas Sep 17 '20 at 14:13

Marco Panichi · Answer 2 · 2016-03-24T08:06:30.360

28

Try this:

.countTable table tr td:first-child + td

You could also reiterate in order to style the others columns:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

edited Mar 24 '16 at 08:06

answered May 15 '12 at 09:40

Marco Panichi

1,068
1
18
31

1

I opted for this in a situation where the owners of the site maintaining the code were not developers and this gave them the ability to change the alignment of columns in their data tables in a very straight forward way that although a little verbose, with comment like you have here, made it easy for them to know which selector block was for which column from the left. Again not the most elegant and efficient way, but it worked! – Eric Bishard May 19 '17 at 22:30

score 20 · Answer 3 · edited Mar 14 '14 at 05:09

20

To change only the second column of a table use the following:

General Case:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

Your case:

.countTable table table td + td{ 

background: red

}

Note: this works for all browsers (Modern and old ones) that's why I added my answer to an old question

edited Mar 14 '14 at 05:09

Satish Sharma

9,547
6
29
51

answered Dec 29 '13 at 20:30

Abzoozy

874
12
26

What would be the tweak to just select the first column? Using table td { ... } selects all cells in other columns as well. – j4v1 Jun 17 '15 at 20:35
1

@j4v1 table td { background: red;} // first column will have red background table td + td { background: blue;} // rest will have blue – Abzoozy Jul 25 '15 at 11:21

score -2 · Answer 4 · answered Jan 31 '14 at 10:23

-2

on this web http://quirksmode.org/css/css2/columns.html i found that easy way

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

answered Jan 31 '14 at 10:23

CodexVarg

502
1
6
20

1

He said he can’t modify the HTML. – Frungi Feb 07 '15 at 03:45

score -3 · Answer 5 · answered Mar 29 '10 at 00:04

-3

You could designate a class for each cell in the second column.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>

answered Mar 29 '10 at 00:04

Duniyadnd

4,013
1
22
29

I can't use this. Like I said, this isn't my page and so, I can't change the html. – Mar 29 '10 at 00:19
2

@Duniyadnd this is not a good approach, compared to existing way of using selectors. – P.M Dec 19 '12 at 19:41

Using CSS how to change only the 2nd column of a table

5 Answers5

Linked