I know I had a sample somewhere, but can’t find it.
What is the proper way to mark up a table so I can style columns?
For example, I want Column 1 to be right-aligned, but the other columns to be left-aligned.
I guess the easiest would be to use nth-child pseudo class and style accordingly.
I just whipped this up in 30 seconds. Purely as an example.
You can use them sure but it’s one per table sorta thing. They must be defined before any thead/tbody/tfoot.
I mean sure but you can only define them before the thead/tbody/tfoot so you can’t individualize thead from tbody like you might want.
How well supported is nth-child?
Do I lose anything semantically if I use your suggestion?
Is there a way with nth-child to say “Do blah on columns 2 through the end of the table”?
If you don’t like that support then you can also add classes to those elements and manually style I guess.
CSS doesn’t deal with semantics so it wouldn’t affect the HTML you have already. So, you don’t lose anything, no 
.
Yes. You mean ignore column1, and hit column 2/3/4/infinity?
Whatever you are asking, it’s possible 
.
That doesn’t look so great.
Or maybe colgroup and col are more stable?
If you only use CSS then you would indeed lose any semantic value of using colgroup or col.
I meant that if there were 10 columns, is there a way to say, “Apply a style to all columns starting with Column 2…” instead of having to manually type in col 1, 2, 3, … 10
IE8 support is the only thing not supported. That’s not…great? You must have exceedingly high standards.
That’s what I meant by my 2/3/4/infinity. Yes that’s possible.
Looks like you won’t be using nth-child though so I won’t bother showing code.
Huh?
What do you need to support that isn’t there?
1 Like
I’m not up on browsers, but I only see one supported version of Opera. That seems bad. Also, the columns to the right (i.e. mobile devices) seem to have limited support. That’s why I said that.
Of course, for IE, FireFox and Chrome, there appears to be good coverage.
Opera updates versions every day it seeems. It’s stupid to list every version. That’s what’s going on here.
Goes back to Opera 9.5 according to that.
Doesn’t it make sense that if Chrome/FF has had support for years, it’s weird that Opera only just now picked on a few months ago? Common sense.
You didn’t look at the “show all”
3 Likes
I said I’m not up on browsers, so no it isn’t “common sense”.
Right or wrong, I develop for stuff that works in FF and Chrome. I’m not a client-side guru like you, and so supporting every version of everything isn’t my focus right now. As such, I rarely even open up Opera, and thus have no clue what version is current.
However, I am looking for solutions that are well supported, so that is why I asked…
I clicked on Show All and nothing happened, so I thought maybe that was the first version or whatever.
You don’t have to be. That’s why it’s common sense .
As I said, calsses can be used as a last resort if you want to support browsers that might have 2 users globally.
I’m still interested.
Thanks, but I don’t understand the 1n+2
If this is the nth-child, and there are n=6 columns, then 1n+2 would be 8.
1n means get every element in multiples of 1, and 2 means to start at the 2nd element.
So that means starting at the second element, select every element multiple of 1. That means 2/3/4/5/infinity.
Change that to 2n+n and it’ll select every OTHER element starting at the 2nd element. Play with it.
3 Likes