Hi!


In a web application I'm displaying a table with values from a data record.
Above the values I have a menu with options in a table row:
+----------+----------+----------+
+ Opt. 1 | Opt. 2 | Opt. 3 |
+----------+----------+----------+

When the values change (e.g. because the user switches to edit mode where
there are forms instead of values) the width of the menu changes. This is a
bit confusing.

Can I specify a width for the menu (actually for the whole table of the data
record) which is adhered to as long as the browser window is wide enough?
When the browser window is too small (could happen sometimes) the table
should be scaled, of course.

Regards,
André

André,

CSS has min-width and max-width properties that relate to this. You
can put min-width on the individual cells to keep them wide enough and
max-width on the table to stop it from overflowing the width of the
page. For example:

table { max-width: 100%; }
td { min-width: 5em; }

There are, however, some problems with this. First you'll need to
check with the spec to find out what should happen when these min- and
max- constraints conflict. I think you want the max-width to win - is
that what wil happen? Maybe some more knowedgable reader knows all
about this.

Second problem is that Internet Explorer doesn't support these
properties. But you can work around this by installing IE7 (google for
it if you haven't heard of it). In my experience IE7 is a bit slow
imposing max-width, but you should have a go.

Regards,

--Phil.