Table attribute width is ignored

Question

Hey,

I'm working on a "little" software project for work.

The 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 an 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 fom 1-9 are only half as width than the others. And in follow, because the fields above size automaticly because they have no width given, their size is also wrong.

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)

We also set style="table-layout:fixed;" for the table but that has no effect, too.

So I dont know how to get the table to have the width I want to have...?

Answer 1

You can't just specify "width=...", you have to change the way the CSS element displays...

So lets assume we want the cell to be 30px wide:

style="width: 30px !important; display: block;"

display: block; basically tells the CSS that it must resize the element based on the dimensions given in width: and height: and not based on what's actually in the element.

However, there is a small concern with doing this that the contents of the element might stretch beyond the bounds specified by width and height, but in this type of situation, I don't think that's going to be a big issue.

HTH

Answer 2

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 3

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;
}