[ Pop-up a printable version of this page ]

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.


"-1%" METHOD version 1
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)
A cell with no very long words. Table="100%"
1st Row="-1%" & "100%"
Other rows="100" & notset

MIXED METHOD version 1
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)
A cell with no very long words. Table="100%"
1st Row="100" & "100%"
Other rows="100" & notset

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


MIXED METHOD version 2
  Fails in Opera (table not 100%)
A cell with no very long words. Table=notset
1st Row="100" & "100%"
Other rows="100" & notset

MIXED METHOD version 3
  fails in Netscape 4.7 (left cell too wide)
A cell with no very long words. Table="100%"
1st Row="100" & "100%"
Other rows=notset & notset

"-1%" METHOD (version 2)
fails in Netscape 4.7 (left cell too wide)
A cell with no very long words. Table="100%"
1st Row="-1%" & "100%"
Other rows="-1%" & "100%"

"-1%" METHOD (version 3)
  Fails in Opera (left cell too wide AND table not 100%) & fails in Netscape 4.7 (left cell too wide)
A cell with no very long words. Table=notset
1st Row="-1%" & "100%"
Other rows=notset & notset

"-1%" METHOD (version 4)
  Fails in Opera & Netscape (table not 100%)
A cell with no very long words. Table=notset
1st Row="-1%" & "100%"
Other rows="100" & notset

"-1%" METHOD (version 5)
  Fails in Opera (left cell too wide AND table not 100%) & fails in Netscape 4.7 (left cell too wide)
A cell with no very long words. Table="100%"
1st Row="-1%" & "100%"
Other rows=notset & notset

THE "100px" ONLY METHOD
  Fails in Opera & Netscape (left cell too wide)
A cell with no very long words. Table="100%"
1st Row="100" & notset
Other rows="100" & notset

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


"-1%" METHOD 2 fluid & 2 fixed cells version
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)  
A cell with no very long words. Table="100%"
1st Row="-1%" & "50%" & "50%" +"-1%"
Other Rows="100" & notset & "100"
 

MIXED METHOD 2 fluid & 2 fixed cells version
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)  
A cell with no very long words. Table="100%"
1st Row="100" & "50%" & "50%" +"100"
Other rows="100" & notset & "100"
 

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


   
A cell with no very long words.  

   
A cell with no very long words.  

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


   
A cell with no very long words.
"-1%" METHOD 2 fluid & 2 fixed
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)  
A cell with no very long words. Table="100%"
1st Row="-1%" & "50%" & "50%" +"-1%"
Other Rows="100" & notset & "100"
 
 

   
A cell with no very long words.
MIXED METHOD 2 fluid & 2 fixed
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)  
A cell with no very long words. Table="100%"
1st Row="100" & "50%" & "50%" +"100"
Other rows="100" & notset & "100"
 
 

And now at 80%


   
A cell with no very long words.
"-1%" METHOD 2 fluid & 2 fixed
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)  
A cell with no very long words. Table="100%"
1st Row="-1%" & "50%" & "50%" +"-1%"
Other Rows="100" & notset & "100"
 
 

   
A cell with no very long words.
MIXED METHOD 2 fluid & 2 fixed
  WORKS in IE5 (PC) NN4.7 (PC), Opera 3.51 (PC), IE4.5 (Mac) NN4.08 (Mac)  
A cell with no very long words. Table="100%"
1st Row="100" & "50%" & "50%" +"100"
Other rows="100" & notset & "100"
 
 

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


1px METHOD 2 fluid & 2 fixed cells version
  Fails in IE (text in left hand cells aligns incorrectly)  
A cell with no very long words. Table="100%"
1st Row="1" & "50%" & "50%" +"1"
Other rows="1" & notset & "1"
 

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


1st ROW 0 METHOD 2 fluid & 2 fixed cells version
  Fails in Netscape (Left cell too wide).  
A cell with no very long words Table="100%"
1st Row="0" & "50%" & "50%" +"0"
Other rows=notset & notset & notset
 

All CELLS 0 METHOD 2 fluid & 2 fixed cells version
  WORKS (?)  
A cell with no very long words. Table="100%"
1st Row="0" & "50%" & "50%" +"0"
Other rows="0" & "100%" & "0"
 

{Printed from http://www.georgedillon.com/web/fluid_tables.shtml on Wed, 20 Sep, 2017 @ 22:07:28}