Table attribute width is ignored

Question

My goal is to generate a html file with tables and export them into pdf.
Unfortunately I cant get the table to act like I want.

One part of the table should display a timescale with days on the lowest row, weeks,months and years are in the rows above and have a pre-calculated colspan.

Only the s for the days have a width given with CSS (style="width:...").

The problem is that the width is totally ignored, so fields with days from 1-9 are only half as width than the others. And in follow, because the fields above size automatically because they have no width given, their size is also wrong.

alt text http://img217.imageshack.us/img217/6617/scale1x.jpg

Heres the source that is generated: http://pastebin.com/JyiqhSzs

What we tried so far:

• used non css (width="")
• give the other field also an calculated width (the colspan value multiplied with the width of a day)

Also set style="table-layout:fixed;" for the table but that has no effect.

So I don't know how to get the table to have the width I want to have?

Answer 1

Instead of width: 23px use min-width: 23px. It worked for IE8 and FireFox. I have not yet figured out a magic formula for IE7 to not narrow the single digit days (working on it). I do know that the table-layout: fixed is not needed, and for sure will cause issues with any IE7 display that may work.

Also, if you always want them to be the same size, you might consider using em sizing so that if text size changes, your table scales up/down with it proportionally. I don't know all your needs, but just a suggestion to look into.

Edit: More cross browser solution. IE6 and 7 need to have all the numbers in the "days" cells wrapped with a div and then instead of styling the td with any kind of width, style that div with a width: 23px not min-width: 23px.

Answer 2

Is the style attribute mistyped as stlye in your real page, too?

Some more hints:

• It's normal for table cell to shrink if the table doesn't fit on the whole page, that's how HTML tables work.
• Try table-layout: fixed after fixing the typo.
• If it still doesn't work you'll need to add a div (or some other element) to each cell and give that the width instead
• A width in pixels won't work if the font isn't the size you expect (and no, you can't force it to a specific size). Try 2ex.
• Instead of setting the style in each and every td why don't you set in the the style sheet.

Example:

<tr class="days"><td>1</td><td>2</td></tr>

tr.days td {
  width: 23px;
}