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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2535112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:49:59  来源:igfitidea点击:

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

css

提问by Nick Craver

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.

谢谢。

回答by Nick Craver

You can use the :nth-childpseudo class like this:

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

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

回答by Marco Panichi

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

回答by Abzoozy

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

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

回答by DorienCragen

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

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

回答by Duniyadnd

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>