Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/tables/mozilla/bugs/bug22019.html 

<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>