Question

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>

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?

Answer 1

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.

Caveats:

• 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.