How best to centre each cell’s content within a column
# January 11, 2013 at 9:27 am
I have a table and want control of how the content of cell in a given column is aligned within that cell.
What I’ve tried:
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.
Andrew# January 11, 2013 at 10:45 am
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!# January 13, 2013 at 7:41 am
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.
You must be logged in to reply to this topic.