| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| |
| <TITLE>Mozilla Tests: Table Sizing Problems</TITLE> |
| |
| <STYLE type="text/css"> |
| TD { border: solid green 1px; } |
| TABLE { border: dotted navy 1px; } |
| DIV { width: 608px; border: solid 1px red; margin: 1em 0; } |
| </STYLE> |
| |
| <p>The table below should have the same width as the red DIV |
| below this paragraph. The inner image should just fit. The |
| image <em>should not</em> overrun the borders. </div> |
| |
| <div></div> |
| |
| <table width="608"> |
| |
| <tr> |
| <td width="25%">a</td> |
| <td width="25%">b</td> |
| <td width="25%">c</td> |
| <td width="25%">d</td> |
| </tr> |
| |
| <tr> |
| <td colspan="2" width="50%"> eee </td> |
| <td colspan="2" width="50%"> f </td> |
| </tr> |
| |
| <tr> |
| <td colspan="4"> <img src="../images/wsp600bot.gif"> </td> |
| </tr> |
| |
| </table> |
| |
| <div></div> |
| |
| <p>Mozilla makes the table way too small for no apparent reason.</p> |
| |
| <p>Here is the same table, one pixel wider:</p> |
| |
| <table width="609"> |
| |
| <tr> |
| <td width="25%">a</td> |
| <td width="25%">b</td> |
| <td width="25%">c</td> |
| <td width="25%">d</td> |
| </tr> |
| |
| <tr> |
| <td colspan="2" width="50%"> eee </td> |
| <td colspan="2" width="50%"> f </td> |
| </tr> |
| |
| <tr> |
| <td colspan="4"> <img src="../images/wsp600bot.gif"> </td> |
| </tr> |
| |
| </table> |
| |
| <p>Observations: Fiddle about with the content of the "eee" cell and everything changes. |
| Remove any of the three rows and things change. Remove any of the four columns and |
| things change. Remove the image and things change.</p> |
| |
| <p>(Note: If the image has disappeared from the server, replace it with any 593px |
| image you like.)</p> |
| |
| <p>See also <a href="tablewidth.html">tablewidth.html</a>.</p> |
| |
| <hr> |
| |
| </BODY> |
| </HTML> |
