FLUID TABLE METHODS ON TEST

NOTE: This page was originally created for my own purposes, but Google has a habit of finding and indexing pages before the site has been registered with any search engine, and is as slow to remove old pages as it is quick to find new ones. As a result I began to get hits on this page coming from Google, and then emails asking where the page was, even though I'd taken it down weeks previously.

So here it is again... ugly and incomplete (notably it doesn't test the "0px" method... but maybe of some use to somebody :-) For more information: Liquid Tables, Rudy Limeback's article on the evolt.org site has to be highly recommended. He doesn't discuss the "-1%" method, but the article is full of good links.

Below are various attempts to create a 'fluid' table, i.e. a table with one (or more) fixed width cells and one (or more) cells which will expand to fill the rest of the table.

As is usually the case, IE copes well with most code, and almost all the methods shown on this page work with IE 5 for PC. The problem comes with Netscape interpreting cell width values as MINUMUMS, and so allowing cells whose widths you want to set precisely to expand beyond your desired limit.

A method which is often recommended (and which I used to use) is to set the 'fluid' cell to some very large pixel value, but however this is done, Opera (version 3.51 for PC at least) will interpret this value literally, resulting in a very wide table (and page) and horizontal scrollbars. Since this would affect all the other tables on this page, this method is not included here, but you may see some examples of it by following this link. (Unless you are using Opera you won't see why this doesn't work.)

I have been asked why the following tables talk about rows... OK, look, I'm sorry but this page was only really meant for me to understand... but FWIW when I say this:

1st row="-1%" & "100%"
Other rows="100" & notset

What I mean is this:

<table>
 <tr><!-- The first row, containing spacer images only -->
  <td width="-1%"><img src="sp.gif" width="100" height="2"></td>
  <td width="100%"><img src="sp.gif" width="2" height="2"></td>
 </tr>
 <tr><!-- All the other rows are like this -->
  <td width="100">foo</td>
  <td>bar</td>
 </tr>
</table>

At no point in this am I talking about row/cell heights (which should never need setting anyway).

SO... here are the correct ways to use the two methods which do work.

...and here's some incorrect ways...

Here, the two safe techniques seen above are applied to a 4 column table.

And just to verify that the above methods really do work, here are the same tables with no text in the centre cells

And now for some fun... let's nest those things... firstly at 100%

And now at 80%

And here's a creative failure, and surprisingly it's IE that breaks this time...

And here's an afterthought... some attempts at the 0 method