使用CSS如何只更改表的第二列

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

仅使用css，如何重写表的第二列的css。

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.

因为它不是我的站点，所以我无法访问这个页面上的html来修改它。

Thanks.

谢谢。

5 个解决方案

#1

191

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

您可以使用:nth-child pseudo类，如下所示:

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

但是请注意，这在旧的浏览器(或IE)中是行不通的，在这种情况下，您需要给单元格一个类或使用javascript。

#2

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

#3

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

注意:这适用于所有的浏览器(现代的和旧的)，这就是为什么我添加了一个老问题的答案。

#4

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>

#5

-1

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

在这个web http://quirksmode.org/css/css2/columns.html中，我发现了一种简单的方法

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

#1

191