Search code examples
htmlcssalignmentcss-tables

HTML/CSS: Table text align


I have this: http://jsfiddle.net/bDTRz/

I wish to make it all look the same no matter the content (I think I need width, but I do not know where). I did width: 100% on all the tables.

Because if you see "Idag" you'll see how the text is different from "old". This is because the td in the columns in "old" is longer(date+time) than the td in "idag" (time only).

How can I solve this? I know I need to use width on the td´s, I tried, but still I didn't manage to make them all align with each other

I gotten this far now: http://jsfiddle.net/79jH6/

But still it does not align like how I want.


Solution

  • The real issue here is a lack of understanding of how column widths are calculated. I suffer from the same lack of understanding — setting width on table cells is often an awkward task and I don't use tables often because of it. I managed to fix your particular issue by defining a <colgroup> element with 3 <col> children, each with a class name:

    <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
    </colgroup>
    

    And the following CSS:

    .col1 { width: 70px; }
    .col2 { width: auto; }
    .col3 { width: 30px; }
    

    Working demo: http://jsfiddle.net/QrUj9/1/