Question

I have a markup:

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

but when Firefox renders the page I see that it put canvas outside the table

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

Why does it happen and how it possible to fix that?

Answer 1

You have to put the CANVAS inside of a TD element.

Change:

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

to:

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

General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.