1 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
3 <TITLE>Mozilla Tests: Table Sizing Problems
</TITLE>
5 <STYLE type=
"text/css">
6 TD { border: solid green
1px; }
7 TABLE { border: dotted navy
1px; }
8 DIV { width:
608px; border: solid
1px red; margin:
1em
0; }
11 <p>The table below should have the same width as the red DIV
12 below this paragraph. The inner image should just fit. The
13 image
<em>should not
</em> overrun the borders.
</div>
20 <td width=
"25%">a
</td>
21 <td width=
"25%">b
</td>
22 <td width=
"25%">c
</td>
23 <td width=
"25%">d
</td>
27 <td colspan=
"2" width=
"50%"> eee
</td>
28 <td colspan=
"2" width=
"50%"> f
</td>
32 <td colspan=
"4"> <img src=
"../images/wsp600bot.gif"> </td>
39 <p>Mozilla makes the table way too small for no apparent reason.
</p>
41 <p>Here is the same table, one pixel wider:
</p>
46 <td width=
"25%">a
</td>
47 <td width=
"25%">b
</td>
48 <td width=
"25%">c
</td>
49 <td width=
"25%">d
</td>
53 <td colspan=
"2" width=
"50%"> eee
</td>
54 <td colspan=
"2" width=
"50%"> f
</td>
58 <td colspan=
"4"> <img src=
"../images/wsp600bot.gif"> </td>
63 <p>Observations: Fiddle about with the content of the
"eee" cell and everything changes.
64 Remove any of the three rows and things change. Remove any of the four columns and
65 things change. Remove the image and things change.
</p>
67 <p>(Note: If the image has disappeared from the server, replace it with any
593px
70 <p>See also
<a href=
"tablewidth.html">tablewidth.html
</a>.
</p>