How best to centre each cell’s content within a column

[coolactuary]

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]

@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]

@coolactuary, Have you considered something like this with css?

col.col1 {your styles}
col.col2 {your styles}
col.col3{your styles}

And HTML

and so on

[coolactuary]

@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

[jurotek]

@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.

[Author]

Posts