I have a table and want control of how the content of cell in a given column is aligned within that cell.
I want to avoid putting classes within each cell (clearly that's a solution, albeit a heavy/bloated one). My javascript is probably just about up to achieving this and I could clearly work with an array representing column alignments. But ideally I'd like this to work with CSS.
What I've tried:
td:nth-of-type(2) {
text-align:center;
}
successfully aligns the second column. The problem is that this is very hardcoded. What is there's another table where I want column 2 right aligned?
My ideal solution is only to apply the above if a header row has a centre class in an appropriate class; row 1 would have its second th with a class of "centre". No future tds would need a class.
But I can't see how to use CSS to chain together the fact that the second th has a "centre" class and the second td (in each row) should be centred.
@ChrisP
Thanks for the response. Your code certainly works. But there are 3 (# columns) * 3 (# possible alignments). You have two of them and two sets of CSS. I see this as potentially growing over time
You're right in that much of my CSS wasn't required for the trivial example given. What I should have said was that same CSS would cope with up to 3*4 possible alignments of up to 4 columns.
Clear as mud?! BTW that was my first foray into CodePen - or anything like it. As with all things Coyier it's darned good!
@jurotek
Nice idea - I'd completely forgotten about colgroup and col, regarding them as old fashioned and not helpful. Turns out I was partially right: you can use the technique you suggest to do a few things (e.g. background colour) but, irritatingly, text-align is not one of them. So, nice idea but a "near miss" it seems.
@coolactuary, you're right, it is very limited what you can do with it, I used it before like changing the background color and width of the columns but that's about it. Thought that you could style more attributes with it.
I have a table and want control of how the content of cell in a given column is aligned within that cell.
I want to avoid putting classes within each cell (clearly that's a solution, albeit a heavy/bloated one). My javascript is probably just about up to achieving this and I could clearly work with an array representing column alignments. But ideally I'd like this to work with CSS.
What I've tried:
td:nth-of-type(2) { text-align:center; }
successfully aligns the second column. The problem is that this is very hardcoded. What is there's another table where I want column 2 right aligned?
My ideal solution is only to apply the above if a header row has a centre class in an appropriate class; row 1 would have its second th with a class of "centre". No future tds would need a class.
But I can't see how to use CSS to chain together the fact that the second th has a "centre" class and the second td (in each row) should be centred.
My best (and at least intuitive) approach so far is at http://codepen.io/anon/pen/fmiDA
I suspect that despite nth-of-type and nth-child I'll either need use jQuery if I want to be more elegant than this.
Thoughts?
Andrew
@coolactuary, I think alot of your css was doing nothing..I did a fork for you here..is that what you were looking for?
@ChrisP Thanks for the response. Your code certainly works. But there are 3 (# columns) * 3 (# possible alignments). You have two of them and two sets of CSS. I see this as potentially growing over time
You're right in that much of my CSS wasn't required for the trivial example given. What I should have said was that same CSS would cope with up to 3*4 possible alignments of up to 4 columns.
Clear as mud?! BTW that was my first foray into CodePen - or anything like it. As with all things Coyier it's darned good!
@coolactuary, Have you considered something like this with css?
And HTML
@jurotek Nice idea - I'd completely forgotten about colgroup and col, regarding them as old fashioned and not helpful. Turns out I was partially right: you can use the technique you suggest to do a few things (e.g. background colour) but, irritatingly, text-align is not one of them. So, nice idea but a "near miss" it seems.
References: http://www.w3.org/TR/CSS2/tables.html#columns http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup
@coolactuary, you're right, it is very limited what you can do with it, I used it before like changing the background color and width of the columns but that's about it. Thought that you could style more attributes with it.