Multiple variable-width columns in a table

[bgold12]

I have a problem that can be simplified to the following: I have a
table with three columns. I need the middle column to be fixed width,
let's say 100px. The other two columns I want to be variable width,
such that one (say the left column) will minimize its width to the
smallest it can be while still fitting a short line of text (no more
than 32 characters) on a single line with no breaks. The right column
I would then want to maximize its width to the remainder of the width
on the screen.

My current solution is as follows:

<table width="100%" border="1" cellpadding="0px"
cellspacing="0px"><tbody><tr><td>
Minimize
</td><td style="width:100px; min-width:100px; ">
Fixed
</td><td style="width:100%; ">
Maximize
</td></tr></tbody></table>

It works in everything but IE (as usual), which doesn't preserve the
fixed width column. Is there a better solution, and if not, how do I
fix this in IE, aside from the natural inclination to direct all IE
users to a page that says "IE sucks".

[Jukka K. Korpela]

bgold12 wrote:

I have a problem that can be simplified to the following: I have a
table with three columns. I need the middle column to be fixed width,
let's say 100px. The other two columns I want to be variable width,
such that one (say the left column) will minimize its width to the
smallest it can be while still fitting a short line of text (no more
than 32 characters) on a single line with no breaks. The right column
I would then want to maximize its width to the remainder of the width
on the screen.

Even though the idea is simple, it is challenging, since table layout is so
problematic - with browser differences, oddities, and quirks. Moreover, the
idea is not expressible in HTML at all. As fas as I can see, it is not
expressible even in CSS. You can of course express the idea of fixed width
for a column in a sense, but only in a sense. In HTML, <td width="100">
(which you don't use in your code fragment and which wouldn't help in
practice) specifies a suggested _minimum_ width. In CSS, you can say width:
100px, but as you can see, IE won't always obey it. Part of the reason is
that you are also suggesting 100% width for one cell, so your suggestions do
not constitute a coherent set.

My current solution is as follows:

Even in a simple case, it is best to provide a URL, if only to show a good
example.

<table width="100%" border="1" cellpadding="0px"
cellspacing="0px"><tbody><tr><td>

The markup is incorrect, since HTML attributes must not contain the px unit.
In practice, browsers will ignore it, but it's still incorrect.

Minimize
</td><td style="width:100px; min-width:100px; ">
Fixed
</td><td style="width:100%; ">
Maximize
</td></tr></tbody></table>

So how do you expect browsers to deal with
100% = something + 100px + 100%
? The surprising thing is that some browsers do what you want.

It works in everything but IE (as usual), which doesn't preserve the
fixed width column. Is there a better solution, and if not, how do I
fix this in IE, aside from the natural inclination to direct all IE
users to a page that says "IE sucks".

Such redirection a very good idea at least from the perspective of your
competitors. :-)

Seriously, using inner markup in the middle-column cell seems to help:

<td><div style="width: 100px">...</div></td>

The point is that this sets a minimum width for the contents of the cell.
This will effectively deal with the allocation of width outside the table
layout algorithm, so that the cell content is comparable to an image or
other fixed-size element.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2008-09-27, bgold12 <bg*****@gmail.comwrote:

I have a problem that can be simplified to the following: I have a
table with three columns. I need the middle column to be fixed width,
let's say 100px. The other two columns I want to be variable width,
such that one (say the left column) will minimize its width to the
smallest it can be while still fitting a short line of text (no more
than 32 characters) on a single line with no breaks. The right column
I would then want to maximize its width to the remainder of the width
on the screen.

This may be your best bet:

table { width: 100%; }
#left { width: 1px; white-space: nowrap }
#middle { width: 100px; }

<table border=1>
<tr>
<td id="left">
Minimize
</td>
<td id="middle">
Fixed
</td>
<td id="right">
Maximize
</td>
</tr>
</table>

I don't have IE to test it in. If white-space doesn't work in IE
consider non-standard-but-who-cares <nobrinside the first td.

1px makes the left column as narrow as possible, which means as wide as
the longest word.

The middle is 100px, and the right should take up the rest because the
whole table is 100% and there's nowhere else for the width to go.

Automatic table formatting is not precisely and accurately specified
anywhere, so keep it simple. Avoid asking for the logically impossible
(one column 100px and another 100% for example) because that just takes
you deeper into the woods-- "ab falso quod libet".

My current solution is as follows:

<table width="100%" border="1" cellpadding="0px"
cellspacing="0px"><tbody><tr><td>
Minimize
</td><td style="width:100px; min-width:100px; ">
Fixed
</td><td style="width:100%; ">
Maximize
</td></tr></tbody></table>

It works in everything but IE (as usual), which doesn't preserve the
fixed width column. Is there a better solution, and if not, how do I
fix this in IE, aside from the natural inclination to direct all IE
users to a page that says "IE sucks".

It may think you want 100% more than you want 100px. It can't really be
blamed for that since you asked for both.