如何通过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?

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

注意事项:

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

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

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

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

超级干净的代码

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

参考:

  • :第一胎和最后一胎

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

我同意<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; }