Today I had a hard time trying to create a table which had some cells of a fixed width, then the others stretching to fill the rest of the page. The problem was I just could not get it to work properly in every browser. If I got it to work one way in one browser, another wouldn’t and vise versa. After messing around for a bit I found the solution, it’s kind of a forceful way to get all the browsers to do what we want, but sometimes the browsers force us to do it!

The set-up I wanted to achieve was as follows…

Very commonly used design, yet getting it to play ball was more painful.

You’d think that the following would do the trick…

<table cellpadding="0" cellspacing="0" style="width:100%">
	<tr>
		<td style="background-image:url(image);"></td>
		<td style="width:800px"></td>
		<td style="background-image:url(image);"></td>
	</tr>
</table>

What you’ll find is the two side panels will stretch perfectly as wanted in some browsers, however others do not want to play ball.

The Solution:

The solution is thankfully fairly simple, however it’s not a very clean way of doing it. But the point is it will do the trick. What you need to do is give the two side panels a percentage width of 50% each (or if you have 1 flexible table cell, then 100%). Now in some browsers this will shrink the middle cell to nothing unless it has content to stretch it to the fixed width. If you don’t have the content in there to do that already, add in a transparent image and size it to the width of the cell. For example:

<table cellpadding="0" cellspacing="0" style="width:100%">
	<tr>
		<td style="background-image:url(image); width:50%;"></td>
		<td style="width:800px">
			<img src="images/spacer.gif" width="800" height="1" border="0" alt="Spacer">
		</td>
		<td style="background-image:url(image); width:50%;"></td>
	</tr>
</table>

The above will (forcefully) behave as we want it to. If you have a table inside the fixed size cell, usually if you set the tables width it will be enough to force the cell to stay at it’s fixed width.

So there you have it, the above worked in IE, Safari, Firefox, Opera, Chrome and on the iPhone.