Re: Styling table column child elements

On Mon, Mar 18, 2013 at 11:59 AM, Henrik Andersson
<henke@henke37.cjb.net> wrote:
> 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.

All of this is solved in Selectors 4, we just need browsers to implement them.

For numerical selection of cells in a column, use :nth-col() or
:nth-last-col()
<http://dev.w3.org/csswg/selectors4/#the-nth-column-pseudo>.  For more
semantic selection, put a class or whatever on the <col> element and
use the column combinator, like "col.money || td"
<http://dev.w3.org/csswg/selectors4/#column-combinator>.

~TJ

Received on Monday, 18 March 2013 19:24:35 UTC