At 8:15 AM -0700 3/1/10, Bob Meetin wrote:
>The first column is a key of sorts, the rest data. Yes I can do
>something like:
>
><tr><td class="c1">some key</td><td class="c2">data</td><td
>style="color: #ff0000">data</td></tr>
>
>Since all of column #1 will take on the same appearance, is there a
>method of setting a global type style that only applies to column 1
>without having to apply the class/style syntax to all 100 rows? Ditto
>for column #2, etc?
Not really, no. You'd think that the 'col' and 'colgroup'
elements would work, but they basically don't. To quote from a book
I'm trying hard to finish:
"If your goal with columns is simply background colors and
setting the column widths, then you're golden. If you want to do
just about anything else to style the columns, though, you're
basically out of luck. That's because there are only two more
properties that the CSS specification allows on table columns,
'border' and 'visibility', and neither is well supported."
This is not true in IE, which applies most (if not all) properties
to columns. It's true in every other modern browser. The reasons
for the differences between browsers as well as between expectation
and specification are deep and complex, but they're not crazy.
There is one non-class approach that's fairly cross-browser
friendly, and that's to use a combination of :first-child and
adjacent-sibling combinators:
td:first-child + td + td {...styles for third column...}
That works in every current browser. It will fail in IE6, which
understands neither :first-child nor adjacent-sibling combinators.
It will also fail in Netscape 4.x.
One caveat: if you ever colspan cells in some rows but not others,
then the adjacent-sibling pattern I've discussed here will thoroughly
fail. If your colspanning is consistent in every row, then it won't.
Incidentally, you might consider changing your "some key" cell to
a '<th scope="row">'. That would let you style the first column
uniquely based on element name alone, and also give you some more
options for selectors. For example, the above could be:
tbody th + td + td {...styles for third column...}
Or:
th[scope="row"] + td + td {...styles for third column...}
Again, neither of those will work in IE6/NN4 but they'll be fine in
any vaguely recent browser.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://mako4css.com/)
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
