Question

仅使用css，如何仅覆盖表的第2列的css。

我可以使用以下方式访问所有列：

.countTable table table td

我无法访问此页面上的html来修改它，因为它不是我的网站。

感谢。

Answer 1

您可以像这样使用:nth-child伪类：

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

但请注意，这在旧版浏览器（或IE）中不起作用，在这种情况下，您需要为单元格提供类或使用javascript。

Answer 2

试试这个：

.countTable table tr td:first-child + td

您还可以重申以设置其他列的样式：

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

Answer 3

要仅更改表格的第二列，请使用以下内容：

一般案例：

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

background:red

}

您的情况：

.countTable table table td + td{ 

background: red

}

注意：这适用于所有浏览器（现代和旧版），这就是为什么我将答案添加到旧问题

Answer 4

您可以为第二列中的每个单元格指定一个类。

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

Answer 5

在这个网络上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>..

使用CSS如何仅更改表的第2列

5 个答案: