[ I n f i n i t i v e l y ]
  [ L i m i t e d . . . . . ]
  [ R e s i z e a b l e . . ]
  [ T . a . b . l . e . . . ]

Objective of this experiment was to build a two column table with fixed-width left column and resizeable right column. And we also wanted overall table width to be 100% of the browser window width.

We started with the simplistic table and proceeded until we got what we wanted.

100% wide table ?

First thing was to make table as wide as the browser's window. But from the very start we found we needed to adjust our math as we learned important lesson: "if sum of cell widths makes it 100%, it doesn't make overall table width 100% of the window width."

a cell much longer cell 


  <table>
     <tr>
        <td width="20%">a cell
        <td width="80%"> much longer cell
  </table>

Setting outer table width to 100% solved the problem.

a cell much longer cell 


  <table width="100%" border>
     <tr>
        <td width="20%">a cell <td>much longer cell
     </tr>
  </table>

Table with fixed width cell

If some cell width is specified in pixels, Netscape Navigator ignores this fact and resizes both of them as it likes. In our example, 50-pixel wide cell constantly occupied around 40% of the overall table width (from 200 to 400 pixels).

Internet Explorer had no problems keeping size of the first cell 50 pixels wide. This automatically disqualified it from the further competition.

Starting this very moment all our efforts were targeted on making Navigator display fixed-width cell.

50 pixel wide cell another cell 


  <table width="100%" border>
     <tr> <td width=50>50-pixel-wide cell <td>another cell
     </tr>
  </table>

Fixed width table within resizeable table

We thought it would be extremely sneaky if we will emulate this fixed cell by using another, inner table of fixed width. The only drawback was that table cell containing inner table was freely resizeable, bringing undesirable gap.

fixed width row A
fixed width row B
outer table cell. 


  <table width="100%" border>
    <tr> <td> 
            <table width=50 border=1>
               <tr><td>fixed width row A <tr><td>fixed width row B
            </table>
         <td>outer table cell.
    </table>

Note, when we put enough text into resizeable cell we almost achieved desired effect:

fixed width row A
fixed width row B
Lots lots lots of text. Lots lots lots of text. Lots lots lots of text. Lots lots lots of text. Lots lots lots of text. Lots lots lots of text.

Finally, resizeable and non-resizeable parts withing the table

Making the resizeable cell 99% wide within the table makes this cell be constanly attached to the cell containing fixed-width element (table) within the row without overlapping fixed-width cell. This works in both Netscape Navigator and Internet Explorer.

fixed width row A
fixed width row B
This cell is resizeable table with fixed-width cells. 


  <table width="100%" border>
    <tr> <td> 
            <table width=50 border>
               <tr><td>fixed width row A <tr><td>fixed width row B
            </table>
         <td width="99%"> This cell is resizeable ...
    </table>

In the jolt of exhiliration, we were not able to keep ourselves and created number of hardcore table examples.

Several fixed and one resizeable cell

If there's a linebreak in the HTML source between <TABLE><TD WIDTH="99%">, Internet Explorer puts some gap underneath fixed width table. Navigator doesn't seem to care.

8050 20
This cell is perfectly resizeable.

Source (Explorer: no gap): 


  <table width="100%" border>
    <tr> <td> 
            <table width=150 border>
               <tr><td width=80>80</td><td width=50>50</td><td width=20>20</td>
            </table><td width="99%"> This cell is perfectly resizeable.
    </table>

Several fixed and two resizeable cells

8050 20
50% wide cell A 50% wide cell B

Source (Explorer: with gap): 


  <table width="100%" border>
    <tr> <td> 
            <table width=150 border>
               <tr><td width=80>80</td><td width=50>50</td><td width=20>20</td>
            </table>
         <td width="50%"> 50% wide cell A <td width="50%"> 50% wide cell B
    </table>

Several fixed and one resizeable cell in multiple rows

Single 80 pixel and doule 40 pixel-wide cells are not quite aligned because of the default CELLSPACING and CELLPADDING which are probably some small non-zero values.

80 50 20
This cell is perfectly resizeable.
40 40 50 20
This cell is perfectly resizeable too. 


  <table width="100%" border>
    <tr> <td> <table width=150 border>
                <tr><td width=80>80</td><td width=50>50</td><td width=20>20</td>
              </table>
         <td width="99%"> This cell is perfectly resizeable.
    <tr> <td> <table width=150 border>
                <tr><td width=40>40</td><td width=40>40</td><td width=50>50</td><td width=20>20</td>
              </table>
         <td width="99%"> This cell is perfectly resizeable too.
    </table>

The same, with images and without inner borders.

First inner table have CELLSPACING and CELLPADDING explicitly set to zero, second uses default values. In Netscape with default CELLSPACING and CELLPADDING there is about 4 pixel gap between the images.

[80][50][20]
This cell is perfectly resizeable.
[40][40][50][20]
This cell is perfectly resizeable too. 


  <table width="100%" border>
    <tr> <td> <table width=150 border=0 cellspacing=0 cellpadding=0>
                <tr><td width=80>80</td><td width=50>50</td><td width=20>20</td>
              </table>
         <td width="99%"> This cell is perfectly resizeable.
    <tr> <td> <table width=150 border=0>
                <tr><td width=40>40</td><td width=40>40</td><td width=50>50</td><td width=20>20</td>
              </table>
         <td width="99%"> This cell is perfectly resizeable too.
    </table>

The same, with zero padding and spacing.

To verify perfect alignment borders were set to zero-width, as well as cell spacing and padding.

[80][50][20]
This cell is perfectly resizeable.
[40][40][50][20]
This cell is perfectly resizeable too. 


  <table width="100%" border=0 cellspacing=0 cellpadding=0>
    <tr> <td> <table width=150 border=0 cellspacing=0 cellpadding=0>
                <tr><td width=80>80</td><td width=50>50</td><td width=20>20</td>
              </table>
         <td width="99%"> This cell is perfectly resizeable.
    <tr> <td> <table width=150 border=0 cellspacing=0 cellpadding=0>
                <tr><td width=40>40</td><td width=40>40</td><td width=50>50</td><td width=20>20</td>
              </table>
         <td width="99%"> This cell is perfectly resizeable too.
    </table>

. . . . . . . . . . . .

[base][ground]