<colgroup><co l class="behold"> </colgroup>

[Roedy Green]

The only browser I have encountered that supports
<colgroup><co l class="behold"> </colgroup>
to apply a CSS style to a whole column, is Microsoft Internet
Explorer. I have been told it SHOULD NOT do so, since this is not
part of the specification.

How then to you apply styles to entire columns? Surely you don't have
to write

<td class="behold"o n every row item.

--

Roedy Green Canadian Mind Products
The Java Glossary
http://mindprod.com

[Martin Honnen]

Roedy Green wrote:

The only browser I have encountered that supports
<colgroup><co l class="behold"> </colgroup>
to apply a CSS style to a whole column, is Microsoft Internet
Explorer. I have been told it SHOULD NOT do so, since this is not
part of the specification.

See http://www.w3.org/TR/CSS21/tables.html#columns, you can apply the
properties border, background, width, and visibility to columns and
column groups. So
col.behold {
background-color: lightblue;
}
should do.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Jukka K. Korpela]

Scripsit Roedy Green:

The only browser I have encountered that supports
<colgroup><co l class="behold"> </colgroup>
to apply a CSS style to a whole column, is Microsoft Internet
Explorer. I have been told it SHOULD NOT do so, since this is not
part of the specification.

Right, though this is a tricky and confusing issue.

How then to you apply styles to entire columns? Surely you don't have
to write

<td class="behold"o n every row item.

Surely you have, if you wish to cover "all" browsers. But you can cover
virtually all significant CSS-enabled browsers by combining two
strategies:
a) use the <colapproach to cover IE
b) use contextual selectors to cover standards-conforming browsers; e.g.
td:first-child + td + td { ... }
is a way of assigning a style to the 3rd column, for rows that contain
td cells only.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Roedy Green]

On Sat, 02 Aug 2008 17:48:53 +0200, Martin Honnen <ma*******@yaho o.de>
wrote, quoted or indirectly quoted someone who said :

>
See http://www.w3.org/TR/CSS21/tables.html#columns, you can apply the
properties border, background, width, and visibility to columns and
column groups. So
col.behold {
background-color: lightblue;
}
should do.

My question is more about the markup to efficiently apply a style to
an entire column, hopefully in a single line, since the plausible
<colgroup><co l style="behold"d oes not seem to work.
I wonder you would point me to a style sheet/html page that implements
some of these features that w3 URL talks about . My brain seems to
work much better generalising from some examples than reading the
lawyerly language spaces. Once I get the general idea from seeing some
examples, the specs make much more sense for gleaning the fine points.

--

Roedy Green Canadian Mind Products
The Java Glossary
http://mindprod.com

[Joshua Cranmer]

Roedy Green wrote:

The only browser I have encountered that supports
<colgroup><co l class="behold"> </colgroup>
to apply a CSS style to a whole column, is Microsoft Internet
Explorer. I have been told it SHOULD NOT do so, since this is not
part of the specification.

As someone who is capable of understanding specs, and has discussed some
of these issues, there are actually a few elements that apply: border,
background, width, and visibility. There is actually a wonderful post by
Hixie that explains why this arrangement makes sense.

How then to you apply styles to entire columns? Surely you don't have
to write

You have several choices. The first thing to keep in mind that most of
the below will fail if you use colspan=""; David Baron (a key Mozilla
layout developer) has proposed the :nth-column() attribute which would
do the right thing in a better way, but nothing has come of it yet.

Choice #1 (supported by Opera, Safari, and alpha builds of Firefox 3.1):
td:nth-child(3) { /* etc */ }

Choice #2 (supported by IE 7, Opera, Safari, and Firefox):
td:first-child + td + td { /* etc */ }

Choice #3 (supported by all browsers) (works with colspan):

<td class="behold"o n every row item.

Addendum:
IE 8 does not appear to claim to support :nth-child, but don't hold me
to that. Firefox 3.1 (IIRC) should be released in Q1 or Q2 2009. Support
for :nth-child was added there (IIRC) just after the release of 3.0, so
any Firefox 3.1 nightly should have support for :nth-child.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

[Michael Stemper]

In article <48************ **********@news spool3.arcor-online.net>, Martin Honnen <ma*******@yaho o.dewrites:

>Roedy Green wrote:

>The only browser I have encountered that supports
<colgroup><c ol class="behold"> </colgroup>
to apply a CSS style to a whole column, is Microsoft Internet
Explorer. I have been told it SHOULD NOT do so, since this is not
part of the specification.

See http://www.w3.org/TR/CSS21/tables.html#columns, you can apply the
properties border, background, width, and visibility to columns and
column groups.

Well, that's pretty useless. The change that I most often want to make
to a column is to right-justify it, because numbers should be right-
justified for readability.

(I'm not blaming the messenger here.)

--
Michael F. Stemper
#include <Standard_Discl aimer>
I feel more like I do now than I did when I came in.

[Michael Stemper]

In article <GC************ *******@reader1 .news.saunalaht i.fi>, "Jukka K. Korpela" <jk******@cs.tu t.fiwrites:

>Scripsit Roedy Green:

>How then to you apply styles to entire columns? Surely you don't have
to write

<td class="behold"o n every row item.

Surely you have, if you wish to cover "all" browsers. But you can cover
virtually all significant CSS-enabled browsers by combining two
strategies:
a) use the <colapproach to cover IE
b) use contextual selectors to cover standards-conforming browsers; e.g.
td:first-child + td + td { ... }
is a way of assigning a style to the 3rd column, for rows that contain
td cells only.

Well, that works nicely. Thanks.

However, I don't quite understand the need for the ":first-child"
pseudo-element. It seems to me, with my limited understanding, that
this would make the remainder ("+ td + td") apply only to something
*within* a TD. In fact, deleting ":first-child" from the style on a
test page didn't have any effect that was visible to me.

Could you explain the purpose of the ":first-child"?

--
Michael F. Stemper
#include <Standard_Discl aimer>
91.2% of all statistics are made up by the person quoting them.

[Michael Stemper]

In article <g7**********@a ioe.org>, ms******@walkab out.empros.com (Michael Stemper) writes:

>In article <GC************ *******@reader1 .news.saunalaht i.fi>, "Jukka K. Korpela" <jk******@cs.tu t.fiwrites:

>>b) use contextual selectors to cover standards-conforming browsers; e.g.
td:first-child + td + td { ... }
is a way of assigning a style to the 3rd column, for rows that contain
td cells only.

>However, I don't quite understand the need for the ":first-child"
pseudo-element. It seems to me, with my limited understanding, that
this would make the remainder ("+ td + td") apply only to something
*within* a TD.

Never mind, I just had an epiphay. It means a TD that is a first child,
not the first child of a TD.

--
Michael F. Stemper
#include <Standard_Discl aimer>
91.2% of all statistics are made up by the person quoting them.

[Harlan Messinger]

Jukka K. Korpela wrote:

Scripsit Roedy Green:

>The only browser I have encountered that supports
<colgroup><c ol class="behold"> </colgroup>
to apply a CSS style to a whole column, is Microsoft Internet
Explorer. I have been told it SHOULD NOT do so, since this is not
part of the specification.

Right, though this is a tricky and confusing issue.

>How then to you apply styles to entire columns? Surely you don't have
to write

<td class="behold"o n every row item.

Surely you have, if you wish to cover "all" browsers. But you can cover
virtually all significant CSS-enabled browsers by combining two strategies:
a) use the <colapproach to cover IE
b) use contextual selectors to cover standards-conforming browsers; e.g.
td:first-child + td + td { ... }
is a way of assigning a style to the 3rd column, for rows that contain
td cells only.

But it will unfortunately be broken by colspanning or rowspanning.

[Jukka K. Korpela]

Scripsit Michael Stemper:

>a) use the <colapproach to cover IE
b) use contextual selectors to cover standards-conforming browsers;
e.g. td:first-child + td + td { ... }
is a way of assigning a style to the 3rd column, for rows that
contain td cells only.

Well, that works nicely. Thanks.

However, I don't quite understand the need for the ":first-child"
pseudo-element. It seems to me, with my limited understanding, that
this would make the remainder ("+ td + td") apply only to something
*within* a TD. In fact, deleting ":first-child" from the style on a
test page didn't have any effect that was visible to me.

I'm not quite sure that was all cleared up. Your comment later said that
you noticed that td:first-child means a td that _is_ a first child (of
some element). This is indeed confusing, and I still fall into this trap
when I'm tired.

At risk of saying something that is now obvious, I'd like to add that
td:first-child thus refers to cells in the first column (assuming all
cells are td and not th, for simplicity), and therefore td:first-child +
td refers to the second column etc. Without the :first-child part, the
selector works ok for a table with only three columns. But if there were
more columns,
td + td + td
would match cells in the third _and all subsequent_ columns.

For completeness, I also add that selectors like td + td don't work on
IE in "quirks mode", but they work on IE 7 in "standards mode". Just in
case someone tested it on IE 7: this would explain the odd phenomenon
that those selectors work there only if a DOCTYPE of a specific kind
appears at the start of the document.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/