使用 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
Using CSS how to change only the 2nd column of a table
提问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-child
pseudo 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>