title: Canvas inside table
body: <p>I have a markup:    </p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" class="table_report_line"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class="dvlefttable"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="dvtoptable" colspan="4" width="100%"&gt;
                  Test
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="dvrighttable"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;canvas id="chartId" width="400" height="400" style="margin: 30px;"&gt;
              &lt;/canvas&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td colspan="4"&gt;
                  &lt;br style="line-height: 15px;" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6" class="bg_bottom_table"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>but when Firefox renders the page I see that it put canvas outside the table</p>
  
  <pre><code>&lt;canvas id="chartId" style="margin: 30px;" height="400" width="400"&gt; &lt;/canvas&gt;
  &lt;table cellspacing="0" cellpadding="0" class="table_report_line"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td class=""&gt;
              &lt;div class="dvlefttable"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td width="100%" colspan="4" class="dvtoptable"&gt;
              Test
          &lt;/td&gt;
          &lt;td class=""&gt;
              &lt;div class="dvrighttable"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
  
      &lt;/tr&gt;
      &lt;tr style="background: none repeat scroll 0% 0% transparent;"&gt;
          &lt;td class="td_border_left"&gt;
          &lt;/td&gt;
          &lt;td colspan="4" class="td_padding_left"&gt;
              &lt;br style="line-height: 15px;"&gt;
          &lt;/td&gt;
          &lt;td class="td_border_right"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="bg_bottom_table" colspan="6"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Why does it happen and how it possible to fix that?</p>