Setting a maximum width for a table

alistair at work — Tue, 29 Jun 2004 14:45:28 +0000

I often seem to need to create tables that shrink and grow in width within a minimum and maximum limit. This should be easy with CSS, using the max-width table property. However, this isn't supported in IE, so I used to use some fiendishly complex ways of achieving this.

The minimum width bit is simple. Just put something in the table that can't break. For example, you can use a 1x1 pixel gif image, stretched to the desired width.

It's the maximum width bit that's the difficult part. However, the following bit of code shows how to achieve this easily. I found this somewhere and have unfortunately forgotten where it came from. So apologies for not crediting the original author.

Contents of table here ...

Fill the table up with content and check out how it expands to 500 pixels wide and then stops. The CSS uses the max-width property, but also uses an expression to say: IF the width is more than 500 pixels THEN make the width 500 pixels ELSE make the width 100%.

Stop using tables for layout

alistair at home — Sun, 18 Apr 2004 21:28:00 +0000

I've always thought that using tables for laying out a Web page was an irritating and ugly workaround. CSS offers a more palatable solution. There are still problems, however, but these sites show some of the possibilities:

www.bluerobot.com/web/layouts – The Layout Resevoir
glish.com/css – Look Ma, No Tables

ITauthor » HTML

Setting a maximum width for a table

Stop using tables for layout