W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: Styling table column child elements

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 18 Mar 2013 12:23:48 -0700
Message-ID: <CAAWBYDBSr8x7ZVi9bUYNsTLQnCVBN5F1J-f4gemh-VJ_DExCoA@mail.gmail.com>
To: Henrik Andersson <henke@henke37.cjb.net>
Cc: "www-style@w3.org" <www-style@w3.org>
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
<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"

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:27 UTC