Table cell not growing as expected

Using colspan and rowspan, the table td should stay at fixed size.

[angedelamort]

I've tried to minimize the code, but with that you'll be able to see my problem easily. What I want to do is that everywhere that the "width: auto;" or "height: auto;" are, I would like them to grow. That's why I've fixed all the other values. But for something I don't understand, it just doesn't work.

I've tried also with the css attribute "table-layout: fixed", but it seems to work only for the rows. And the max-width/height attributes are not supported on td/tr tags.

<table style="border:0px; border-collapse: collapse;" cellpadding="0" cellspacing="0">
<tr style="height: 40px;">
<td style="background-image:url('1.gif'); width: 26px;"></td>
<td style="background-image:url('2.gif'); width: 158px;"></td>
<td style="background-image:url('7.gif'); background-repeat:repeat-x; width: auto;"></td>
<td style="background-image:url('8.gif'); width: 11px;"></td>
</tr>
<tr style="height: 87px;">
  <td style="background-image:url('9.gif'); width: 26px;"></td>
  <td colspan="2" rowspan="3" style="width: auto;">This is a long text to test the width. I should grow properly on the top and bottom.<br /><br /><br /><br /><br /><br />middle text.<br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
  <td style="background-image:url('1.gif'); width: 11px;"></td>
</tr>
<tr style="height: auto;">
<td style="background-image:url('12.gif'); background-repeat:repeat-y; width: 26px;"></td>
<td style="background-image:url('16.gif'); background-repeat:repeat-y; width: 11px;"></td>
</tr>
<tr style="height: 70px;">
<td style="background-image:url('17.gif'); width: 26px;"></td>
<td style="background-image:url('19.gif'); width: 11px;"></td>
</tr>
<tr style="height: 35px;">
<td style="background-image:url('20.gif'); width: 26px;"></td>
<td style="background-image:url('21.gif'); width: 272px;"></td>
<td style="background-image:url('23.gif'); background-repeat:repeat-x; width: auto;"></td>
<td style="background-image:url('24.gif'); width: 11px;"></td>
</tr>
</table>

What the code does is to put a fancy border around a frame. The frame is where the text is.

So, I'm wondering if there are any solution?

[limbo]

By default, if a table cell has no width declared, it will grow or contract to meet the size of the cell widths declared around it.

What happens if you remove width:auto; from those cells without a fixed width?

It strikes me that by declaring auto could be (incorrectly) changing the display property of those cells in some browsers.

[angedelamort]

It does absolutely no difference. I just put it there so it would be easier to see. If you read from the doc, you will see that "width: auto" is the default value.

[w3schools.com ]

From what I understand, the problem seems to come from the colspan and the rowspan. The behaviors seem to be undefined since it ignores completely the width/height constraints.

[angedelamort]

Ok, I had an idea an it seems that it works. Instead of having 1 table with collspan and rowspan, I decided to split the table into multiple small tables:

[div]
[table top /]
[table middle]
[tr][table left/][/tr]
[tr][Body -> where collspan and rowspan were][/tr]
[tr][table right/][/tr]
[/table middle]
[table bottom /]
[/div]

Hope this help some people.