HTML: How to style each table cell in a column via CSS?

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.

Answer 2

Well for the first and last columns you can use the :first-child and :last-child pseudo class:

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

Reference:

• :first-child and :last-child

Answer 3

.table_class tr td { padding:10px; font-weight:bold; }

apply above class table_class to table.

Answer 4

Additionally to seanizer's solution you can combine :first-child with the adjacent sibling selector + (also not supported by IE6):

td:first-child { /* first column */ }

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

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

/* etc. */