如何通过CSS为列中的每个表格单元设置样式? [英] How to style each table cell in a column via CSS?

问题描述

我有一个普通的HTML表:

I have an ordinary HTML table:

<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的情况下做到这一点?

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/style attribute to every table cell in that column, and without JavaScript?

推荐答案

使用<col>标记并根据

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>标签仅支持样式border，background，width和visibility(及其派生类，例如background-color).
• 除非<table>具有border-collapse: collapse;，并且浏览器之间的行为不一致，否则border声明将不起作用.
• 由于已知错误.

• Any row or cell styling will supersede column styling.
• The <col> tag only supports styling border, background, width and visibility (and their derivatives, such as background-color).
• The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
• The visibility declaration does not work properly in Chrome due to a known bug.

这篇关于如何通过CSS为列中的每个表格单元设置样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！