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

Css

Css Problem Overview


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.

Css Solutions


Solution 1 - Css

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.

Solution 2 - Css

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 */

Solution 3 - Css

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

Solution 4 - Css

use this

table td:nth-child(2)

Solution 5 - Css

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

Solution 6 - Css

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser290043View Question on Stackoverflow
Solution 1 - CssNick CraverView Answer on Stackoverflow
Solution 2 - CssMarco PanichiView Answer on Stackoverflow
Solution 3 - CssAbzoozyView Answer on Stackoverflow
Solution 4 - Csssweetnandha cseView Answer on Stackoverflow
Solution 5 - CssCodexVargView Answer on Stackoverflow
Solution 6 - CssDuniyadndView Answer on Stackoverflow