如何通过CSS设置列中的每个表单元格？

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

Answer 1

按照本指南使用<col>标签并设置它的样式。 这样你只需要添加一个类（或内联样式规范）到<col>元素而不是表中的每个<td> 。

注意事项：

• 任何行或单元格样式都将取代列样式。
• <col>标签只支持样式border ， background ， width和visibility （及其衍生物，如background-color ）。
• 除非<table>具有border-collapse: collapse;否则border声明不起作用border-collapse: collapse; ，而且浏览器之间的行为是不一致的。
• 由于已知错误 ，Chrome的visibility声明在Chrome中无法正常工作。

Answer 2

除了肖恩·帕特里克·弗洛伊德的解决scheme，你可以结合:first-child与邻居兄弟select器+ （也不支持IE6）：

 td:first-child { /* first column */ } td:first-child + td { /* second column */ } td:first-child + td + td { /* third column */ } /* etc. */ 

Answer 3

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

超级干净的代码

Answer 4

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

参考：

• ：第一胎和最后一胎

Answer 5

以下允许您在表级设置列的样式，并且可以以更通用的方式用于前面的示例，因为您不必对样式表本身内应用于给定列索引的样式进行假设。

我同意<col>方法最适合您的需求，但风格范围非常有限。

具有灰色文本样式的样本样式列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; }