Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / tables / mozilla / bugs / bug22019.html
blob: b763f121d1f5f6a3b16cf066d7e7b7dcb64c0b4e [file] [log] [blame]
<html><head>
<style>
table {
width: 600px;
border: 1px solid red;
empty-cells: show;
}
td {
border: 1px solid green;
}
table.inner {margin: 20px; width: 600px;}
</style><head>
<body>
<pre>These tables below all have the HTML + CSS ...
&lt;TABLE>&lt;tr> table {
&lt;td>&lt;TABLE style='margin: 20px; padding: 19px;'> width: 600px;
&lt;tr>&lt;td>&lt;/td>&lt;/tr> border: 1px solid red;
&lt;/TABLE>&lt;/td> empty-cells: show;}
&lt;/tr>&lt;/TABLE> td {
border: 1px solid green;}
table.inner {margin: 20px;}
... and differ only in the value of 'padding:'. From top table to
bottom: 0px, 10px, 19px, 20px, 25px. Note that for a <u><i>table over-constrained
within another table</i></u>, <i><u>when (padding >=margin)</u></i>, the margin is <i><u>all allocated
to the right hand side</u></i> of the table (and to the left if 'direction: rtl;'.</pre>
<TABLE style='width: 600px; border: 1px dotted blue;'><tr>
<td>600px table for width comparison</td>
</tr></TABLE>
<TABLE><tr>
<td><TABLE class='inner' style='padding: 0px;'>
<tr><td></td></tr>
</TABLE></td>
</tr></TABLE>
<TABLE><tr>
<td><TABLE class='inner' style='padding: 10px;'>
<tr><td></td></tr>
</TABLE></td>
</tr></TABLE>
<TABLE><tr>
<td><TABLE class='inner' style='padding: 19px;'>
<tr><td></td></tr>
</TABLE></td>
</tr></TABLE>
<TABLE><tr>
<td><TABLE class='inner' style='padding: 20px;'>
<tr><td></td></tr>
</TABLE></td>
</tr></TABLE>
<TABLE><tr>
<td><TABLE class='inner' style='padding: 25px;'>
<tr><td></td></tr>
</TABLE></td>
</tr></TABLE>
</body>
</html>