如何通过 CSS 为列中的每个表格单元格设置样式？答案

【问题标题】：How to style each table cell in a column via CSS?如何通过 CSS 为列中的每个表格单元格设置样式？
【发布时间】：2011-04-22 06:27:53
【问题描述】：

我有一个普通的 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>

我想将 CSS 样式应用于特定列中的每个表格单元格 (td)。是否可以在不将 class/style 属性应用于该列中的每个表格单元格且不使用 JavaScript 的情况下做到这一点？

【问题讨论】：

考虑到其他方法的局限性，这似乎实际上是更好的解决方案
这些解决方案都不可接受；看起来目前没有单一的方法来指定列的单元格属性，因为没有地方可以向列添加类或 id。我认为，如果没有通用替代方案，则不应弃用此功能。强制编码人员知道 html 表格的数字索引或在每个表格单元格中指定一个类以设置样式是绝对没有合理的理由的。

标签： html css

【解决方案1】：

这是一个旧帖子。但我也有同样的问题。发现这是可行的：

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

此样式设置将第三行第二列的背景颜色设置为红色，

【讨论】：

【解决方案2】：

使用<col> 标签并将其样式设置为this guide。这样，您只需向<col> 元素添加一个类（或内联样式规范），而不是表中的每个<td>。

注意事项：

任何行或单元格样式都将取代列样式。
<col> 标记仅支持样式设置 border、background、width 和 visibility（以及它们的派生词，例如 background-color）。
border 声明不起作用，除非<table> 具有border-collapse: collapse;，并且浏览器之间的行为不一致。
由于known bug，visibility 声明在 Chrome 中无法正常工作。

【讨论】：

注意：只接受一些样式属性（如 text-align 或 width）
这仍然是解决样式的最佳解决方案，因为样式和标记保持独立。下面更被接受的答案是必要的，但很脆弱，因为向市场添加列会完全破坏预期结果，因此需要更多维护。
几乎所有<col> 属性在HTML5 中也不支持：w3schools.com/tags/tag_col.asp
@AlanH 这是因为 HTML5 期望您使用 CSS3 而不是这些属性，所以它们被弃用了。重要的属性 span、style 和 class 在 HTML5 中仍然可用。
@fcalderan 它甚至不支持text-align。它唯一支持的是border、background、width 和visibility（以及它们的派生词，如果有的话）。这使得这个col 标签毫无用处。你最好只在你的th/td 上放一个类，并在没有这种愚蠢限制的情况下设置该类的样式。或者你可以使用child hacks。

【解决方案3】：

以下允许您在表级别设置列样式，并且可以以更通用的方式使用前面的示例，因为您不必对样式表中应用于给定列索引的样式做出假设自己。

我同意

方法如果适合您的需求是最好的，但样式的范围非常有限。

带有灰色文本样式的示例样式列 1、2 和 4。

HTML

<table class="example col1-readonly col2-readonly col4-readonly">

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

【讨论】：

我不确定这会如何改进——实际的索引号是未知的，解决方案需要使用 class 来识别列位置。

【解决方案4】：

2015 年的答案，基于第一个孩子的答案，但更干净。

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

超级干净的代码

【讨论】：

我同意，这应该是当前的解决方案。
如果您的表使用 colspan，这可能不会给出预期的结果。
colspan 和 rowspan 都会导致大问题。当您使用任一跨度时，“跨度”的同级不存在，因此您最终会设置错误的单元格样式。
如果出于某种奇怪的原因，在标签之间有非标签，则需要使用 nth-of-type 来代替。
这是大多数情况下的理想选择。尽管如果您以后想在大表中重新排序列，它可能会回来咬您。然后，您需要使用脚本来更改代码中所有 nth-child 声明的索引。在这种情况下，最好使用col 标签。不幸的是，正如一些人所指出的那样，该标签似乎存在问题。

【解决方案6】：

对于第一列和最后一列，您可以使用 :first-child 和 :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;
}

参考：

:first-child and :last-child

【讨论】：

:first-child 只是 IE8 的 almost supported 和 :last-child 根本不支持。
同样的老歌。抱歉，好多年没用过IE了。在 FF 和 Chrome 中像魅力一样工作。
投反对票？为什么？这是一个有效的 CSS 解决方案。您应该将您的反对票发送给 Redmond，以构建有缺陷的浏览器 ...
肖恩·帕特里克·弗洛伊德（Sean Patrick Floyd）：这就像说你应该能够赤身裸体地四处走动，因为如果他们不喜欢那是别人的问题。理想和现实不是一回事。 “有效的 CSS”是既符合规则又可以工作的 CSS。
@rainabba: 和 MS（凭借 IE）定义的规则集？我想不是。如果一个特性在 CSS 中被支持，但在浏览器中不支持，那么失败的不是解决方案。