Re: [css-d] apply a style to specific table column
Jukka K. Korpela wrote:
Eric A. Meyer wrote:
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.
Those who wish to cover old browsers may consider using a combined strategy
where you additionally use col elements and selectors based on them -
knowing that they should not work but actually work on some browsers. You
can normally use the combined strategy so that you just add the suitable
selectors to a rule like the one above.
For my purposes, needs in this case, being able to set the background
color will fit the bill; it would be nice if font color was valued by
all browsers consistently but seeing that it's not, I can deal with
it. Here is a sample which you can view in the browser of your choice,
then compare with the other guy.
Jukka, can you make up a simple example? I'm not sure what you mean by
using the + signs here.
http://dottedi.biz/code/css_styled_table.html (I should call this
unsightly example...)
Thx, Bob
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] apply a style to specific table column
On Mar 4, 2010, at 7:45 AM, Bob Meetin wrote: For my purposes, needs in this case, being able to set the background color will fit the bill; it would be nice if font color was valued by all browsers consistently but seeing that it's not, I can deal with it. Here is a sample which you can view in the browser of your choice, then compare with the other guy. Jukka, can you make up a simple example? I'm not sure what you mean by using the + signs here. Well, color is not one of those properties that are applied to col. If you hadn't seen it yet: http://ln.hixie.ch/?count=1start=1070385285 Ie 6 and 7 go their own way in this. IE 8 in standards mode behave like other browsers. http://dottedi.biz/code/css_styled_table.html (I should call this unsightly example...) Might be nice to make it a valid example... Here is your sample, reworked: http://dev.l-c-n.com/_temp/s_c_tb.html with some + goodness. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] apply a style to specific table column
Philippe Wittenbergh wrote: On Mar 4, 2010, at 7:45 AM, Bob Meetin wrote: For my purposes, needs in this case, being able to set the background color will fit the bill; it would be nice if font color was valued by all browsers consistently but seeing that it's not, I can deal with it. Here is a sample which you can view in the browser of your choice, then compare with the other guy. Jukka, can you make up a simple example? I'm not sure what you mean by using the + signs here. Well, color is not one of those properties that are applied to col. If you hadn't seen it yet: http://ln.hixie.ch/?count=1start=1070385285 Ie 6 and 7 go their own way in this. IE 8 in standards mode behave like other browsers. http://dottedi.biz/code/css_styled_table.html (I should call this unsightly example...) Might be nice to make it a valid example... Here is your sample, reworked: http://dev.l-c-n.com/_temp/s_c_tb.html I intentionally left the failed styles including color in the example to emphasize the failure, not just the inconsistency. Call it a wishlist. I might have done better to make that clear, but sometimes illustrating failure or lack of functionality is helpful. So anyway I made some changes, added a few notes and a doctype to make it validate... Should be more useful. -Bob __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] apply a style to specific table column
-Original Message- Let's say you have a table to 10 columns and 100 rows. With rows you can fairly easily set up a custom style to apply to a row, but what about columns? The first column is a key of sorts, the rest data. Yes I can do something like: trtd class=c1some key/tdtd class=c2data/tdtd style=color: #ffdata/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? --- You can use the 'colgroup' tag with a class applied to the 'col's inside, and then style those. Hopefully this link will be of use: http://htmldog.com/guides/htmladvanced/tables/ James __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] apply a style to specific table column
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:
trtd class=c1some key/tdtd class=c2data/tdtd
style=color: #ffdata/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 [cs...@lists.css-discuss.org]
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/
Re: [css-d] apply a style to specific table column
On 01-Mar-10 12:05, Eric A. Meyer wrote: Again, neither of those will work in IE6/NN4 but they'll be fine in any vaguely recent browser. Not to start a religious war, but NN4? I can see more recent versions of NN but NN4? Do we make the same sort of observations on IE3 or IE4? It seems like ages since IE5.0 was mentioned here (on this list). Perhaps I'm missing something, if I am then I'm all ears and would like to hear why NN4 should not be dismissed outright. Sure, some people will keep using it, and they'll make allowances when pages don't display quite properly. Sorta the same way pages won't display properly for all those half-dozen-or-so users who are still using Windows 3.11 and IE3 or earlier. If they aren't spoofing that data. @@ Reese __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] apply a style to specific table column
Eric A. Meyer wrote:
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.
Those who wish to cover old browsers may consider using a combined strategy
where you additionally use col elements and selectors based on them -
knowing that they should not work but actually work on some browsers. You
can normally use the combined strategy so that you just add the suitable
selectors to a rule like the one above.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] apply a style to specific table column
At 12:37 PM -0500 3/1/10, Reese wrote: On 01-Mar-10 12:05, Eric A. Meyer wrote: Again, neither of those will work in IE6/NN4 but they'll be fine in any vaguely recent browser. Not to start a religious war, but NN4? Just a small, apparently botched attempt at some wry humor. Pay it no mind, continue as you were, nothing to see here, keep right, et cetera, et cetera. -- 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 [cs...@lists.css-discuss.org] 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/
