Html 帆布内桌

我有一个标记：

<table cellpadding="0" cellspacing="0" class="table_report_line">
    <tbody>
        <tr>
            <td>
                <div class="dvlefttable">
                </div>
            </td>
            <td class="dvtoptable" colspan="4" width="100%">
                Test
            </td>
            <td>
                <div class="dvrighttable">
                </div>
            </td>
        </tr>
        <tr>
            <canvas id="chartId" width="400" height="400" style="margin: 30px;">
            </canvas>
        </tr>
        <tr>
            <td>
            </td>
            <td colspan="4">
                <br style="line-height: 15px;" />
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="6" class="bg_bottom_table">
            </td>
        </tr>
        </tbody>
    </table>

测验

但是当Firefox呈现页面时，我看到它将画布放在了表外

<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
    <tr>
        <td class="">
            <div class="dvlefttable">
            </div>
        </td>
        <td width="100%" colspan="4" class="dvtoptable">
            Test
        </td>
        <td class="">
            <div class="dvrighttable">
            </div>
        </td>
    </tr>
    <tr>

    </tr>
    <tr style="background: none repeat scroll 0% 0% transparent;">
        <td class="td_border_left">
        </td>
        <td colspan="4" class="td_padding_left">
            <br style="line-height: 15px;">
        </td>
        <td class="td_border_right">
        </td>
    </tr>
    <tr>
        <td class="bg_bottom_table" colspan="6">
        </td>
    </tr>
    </tbody>
</table>

测验

---

为什么会发生这种情况以及如何修复这种情况？

您必须将画布放在TD元素中

更改：

<tr>
  <canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>

致：

在这种情况下，一般的经验法则是使用，看看你做错了什么

<tr>
  <td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>