桌子内有帆布

Question

我有一个标记：

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

为什么会发生这种情况以及如何解决这个问题？

Answer 1

您必须将 CANVAS 放入 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>

：在这种情况下，一般经验法则是使用 HTML 验证器 来查看您做错了什么。