Холст внутри стола

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 вне таблицы

<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-валидатор , чтобы увидеть, что вы сделали неправильно.