如何通过CSS设置列中每个表格单元格的样式？
如何通过CSS设置列中每个表格单元格的样式？
提问于 2010-10-07 17:17:23
我有一个普通的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？
回答 3
Stack Overflow用户
发布于 2015-10-08 09:55:38
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 */ }超级干净的代码
Stack Overflow用户
发布于 2010-10-07 19:13:27
此外，对于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. */Stack Overflow用户
发布于 2019-09-20 16:39:31
这是一个老帖子。但我也有同样的问题。我发现这是有效的：
<!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>此样式设置将第三行和第二列中的背景颜色设置为红色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3880248
复制相关文章
相似问题