зеркало из https://github.com/mozilla/pjs.git
76 строки
1.8 KiB
HTML
76 строки
1.8 KiB
HTML
<!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>
|