Styling table column child elements

I have noticed that CSS doesn't offer a clear way of styling the
elements in a specific table column.

With that I mean the children of the table cells.

You can style the <col> elements to a minimal extent and thusly affect
the table cells. But it is limited to four properties and doesn't work
for children of the cells.

You could in theory use the :nth-of (and friends) selectors to do this,
but there are two issues.

The first one being the use of numerical indexes. They are bothersome to
figure out and are not semantically clear like identifiers. They also
risk becoming wrong when the column list is changed.

The second issue is that they wouldn't work correctly with tables that
use colspans. The assumption of one element=one column would fall apart
there.

The traditional workaround is to adjust the markup to have each and
every cell in the column have a specific class. Suffice to say, but that
is incredibly tedious, error prone and increases the size of the markup.

Instead I think that CSS needs a new selector to deal with this
situation. It is a rather specific case, but I see no better solution.

Received on Monday, 18 March 2013 19:00:10 UTC