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