Html 如何通过 CSS 为列中的每个表格单元格设置样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3880248/
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
How to style each table cell in a column via CSS?
提问by Andrew Florko
I have an ordinary HTML table:
我有一个普通的 HTML 表：
<table>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
</table>
I want to apply CSS style to every table cell (td) in a particular column. Is it possible to do that without applying the class/styleattribute to every table cell in that column, and without JavaScript?
我想将 CSS 样式应用于td特定列中的每个表格单元格 ( )。是否可以在不将class/style属性应用于该列中的每个表格单元格并且不使用 JavaScript 的情况下做到这一点？
采纳答案by Deniz Dogan
Use the <col>tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col>element instead of each <td>in the table.
<col>按照本指南使用标签和样式。通过这种方式，您只需要向<col>元素添加一个类（或内联样式规范），而不是<td>在表中添加每个类。
Caveats:
注意事项：
- Any row or cell styling will supersede column styling.
- The
<col>tag only supports stylingborder,background,widthandvisibility(and their derivatives, such asbackground-color). - The
borderdeclaration does not work unless the<table>hasborder-collapse: collapse;, and the behavior is inconsistent between browsers. - The
visibilitydeclaration does not work properly in Chrome due to a known bug.
- 任何行或单元格样式都将取代列样式。
- 该
<col>标签仅支持样式化border、background、width和visibility（及其派生词，例如background-color）。 - 该
border声明没有工作，除非<table>有border-collapse: collapse;和行为是浏览器之间的不一致。 visibility由于已知错误，该声明在 Chrome 中无法正常工作。
回答by RoToRa
Additionally to Sean Patrick Floyd's solution you can combine :first-childwith the adjacent sibling selector +(also not supported by IE6):
除了 Sean Patrick Floyd 的解决方案之外，您还可以结合:first-child相邻的兄弟选择器+（IE6 也不支持）：
td:first-child { /* first column */ }
td:first-child + td { /* second column */ }
td:first-child + td + td { /* third column */ }
/* etc. */
回答by Nelson
2015 answer, and based on the first-child answer but MUCH cleaner.
2015 年的答案，基于第一个孩子的答案，但要干净得多。
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }
Super clean code
超级干净的代码
回答by Sean Patrick Floyd
Well for the first and last columns you can use the :first-childand :last-childpseudo class:
那么对于第一列和最后一列，您可以使用:first-childand:last-child伪类：
/* make the first cell of every row bold */
tr td:FIRST-CHILD{
font-weight:bold;
}
/* make the last cell of every row italic */
tr td:LAST-CHILD{
font-style:italic;
}
Reference:
参考：
回答by Sprotty
The following allows you to style columns at table level, and can be used in a more general way to the previous examples, as you don't have to make assumptions about the styles applied to a given column index within the style sheet itself.
以下允许您在表级别设置列样式，并且可以以更通用的方式用于前面的示例，因为您不必对应用于样式表本身内给定列索引的样式进行假设。
I agree that the <col> approach is best if it fits your needs, but the range of styles is very limited.
我同意 <col> 方法如果满足您的需求是最好的，但样式范围非常有限。
The sample styles column 1, 2, & 4 with a grey text style.
示例样式列 1、2 和 4 具有灰色文本样式。
HTML
HTML
<table class="example col1-readonly col2-readonly col4-readonly">
CSS
CSS
.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
color:#555;
}
回答by Niels Henrik Bruun
This is an old post. But I had the same question. Found this to be working:
这是一个旧帖子。但我有同样的问题。发现这是有效的：
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>
This style setting sets the background color to red in the third row and second column,
此样式设置将第三行第二列的背景颜色设置为红色，
