Grow your CSS skills. Land your dream job.

Right align a table cell

  • # July 12, 2012 at 4:32 pm

    The following fiddle shows a 2×3 css table layout with 5 cells.
    http://jsfiddle.net/BeBum/
    Now, I want cell no. 2 to be right aligned, positioned above cell no. 5.
    I could just add an empty cell between 1 and 2, but what if the table has a variable width
    and you don’t know the number of cells in a row ? Could be 4 or 7.
    I want the no. 2 cell to always be at the utmost right position of the table.
    (position:absolute on .column doesn’t work)

    # July 12, 2012 at 5:20 pm

    Out of interest – what is your use case for this?

    It seems you are using a table layout and then trying to force it to something a table layout was never designed to do – I’d be intrigued to see why.

    Position relative kind of works – see this CodePen – but only if you know the spacing and work it out manually so probably no good for what you want.

    # July 12, 2012 at 6:13 pm

    thanks for your feedback.
    i’m trying to make a variable grid layout , but the top row has only 2 boxes. one left and one right.
    the remaining rows can have different numbers of boxes, and all left aligned.
    come to think of it, maybe I can use table-column-group?

    # July 13, 2012 at 3:50 am

    Would this do what you want?

    http://jsfiddle.net/BeBum/8/

    # July 14, 2012 at 4:54 am

    beautiful!
    with the position:absolute I was already halfway, but never would’ve come up with the :first-child :last-child.
    thanks.

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

You must be logged in to reply to this topic.

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