Grow your CSS skills. Land your dream job.

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.

    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

    # January 11, 2013 at 9:36 am

    @coolactuary, I think alot of your css was doing nothing..I did a [fork for you here](http://codepen.io/ChrisPlz/pen/EBJgw “”)..is that what you were looking for?

    # January 11, 2013 at 10:45 am

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

    # January 11, 2013 at 5:44 pm

    @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

    # January 13, 2013 at 7:41 am

    @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

    # January 13, 2013 at 9:17 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".