in Html table the word not wrapped in firefox alone - html

In html table,the text is automatically wrapped in IE and chrome. But Firefox it's taking more space and then wrapped.. What was the issue in firefox...Any idea..?. Please find the table below.. Column 1 has bigger text which wrapped and occupies less width in IE & chrome..The same occupies more width in firrefox
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th valign="top" align="center" colspan="5">
Header Col
</th>
</tr>
<tr>
<th valign="top" align="center" cell="1" id="c0">
Col1
</th>
<th valign="top" align="center" cell="2" id="c1">
col2
</th>
<th valign="top" align="center" cell="3" id="c2">
col3
</th>
<th valign="top" align="center" cell="4" id="c3">
col4
</th>
<th valign="top" align="center" cell="5" id="c4">
col5
</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" align="left" cell="1">
<table cellspacing="0" cellpadding="0" border="0" class="deffont" style="width: 100%">
<tbody>
<tr>
<td width="15" valign="top" align="left" style="padding-bottom: 0px; margin: 0px;
padding-left: 0px; padding-right: 0px; height: 100%; padding-top: 0px">
</td>
<td valign="top" align="left">
<div>
<div>
<b><a></a><b>H-(D)p-ganeshgkdagkalyal-(D)seryl-(D)tryptophanyl-(D)seryl-(D)haninsdj-(D)cyclohexylalanyl-(D)arginyl-(D)arginyl-(D)arginyl-(D)glutaminyl-(D)arginyl-(D)arginine
acetate salt</b><br>
<br>
</b>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" align="left" cell="2">
<div>
<div>
<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="3">
<div>
<div>
For test in combination with test and test for the test of test with test.<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="4">
<div>
<div>
<table cellspacing="0" cellpadding="0" border="0" class="deffont">
<tbody>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<b></b>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="5">
<div>
<div>
DD: 12/22/11 <br>
</div>
</div>
</td>
</tr>
</tbody>
</table>


Add this style to your TD : style="display: inline-block;word-break: break-all;"
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th valign="top" align="center" colspan="5">
Header Col
</th>
</tr>
<tr>
<th valign="top" align="center" cell="1" id="c0">
Col1
</th>
<th valign="top" align="center" cell="2" id="c1">
col2
</th>
<th valign="top" align="center" cell="3" id="c2">
col3
</th>
<th valign="top" align="center" cell="4" id="c3">
col4
</th>
<th valign="top" align="center" cell="5" id="c4">
col5
</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" align="left" cell="1">
<table cellspacing="0" cellpadding="0" border="0" class="deffont" style="width: 100%">
<tbody>
<tr>
<td width="15" valign="top" align="left" style="padding-bottom: 0px; margin: 0px;
padding-left: 0px; padding-right: 0px; height: 100%; padding-top: 0px">
</td>
<td valign="top" align="left" style="display: inline-block;word-break: break-all;">
<div>
<div>
<b><a></a><b>H-(D)p-ganeshgkdagkalyal-(D)seryl-(D)tryptophanyl-(D)seryl-(D)haninsdj-(D)cyclohexylalanyl-(D)arginyl-(D)arginyl-(D)arginyl-(D)glutaminyl-(D)arginyl-(D)arginine
acetate salt</b><br>
<br>
</b>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" align="left" cell="2">
<div>
<div>
<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="3">
<div>
<div>
For test in combination with test and test for the test of test with test.<br>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="4">
<div>
<div>
<table cellspacing="0" cellpadding="0" border="0" class="deffont">
<tbody>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<b></b>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</td>
<td valign="top" align="left" cell="5">
<div>
<div>
DD: 12/22/11 <br>
</div>
</div>
</td>
</tr>
</tbody>
</table>

Related

Align table text side by side in html

Below is my html code in which I am trying to create a quotation form. I have added rate and below it I want to add the rates of each services.
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
Browser Result
I want to set it to the right in line with Below are the services that you will be provided:
Any help would be highly appreciated

I found two issues:
two tags were missing: <a> and </table>
there was a colspan and a float that were unnecessary
So your example is working as expected:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
If you want "Rate" to be aligned right with a big gap between the two cells, you just need to give the nested table a width: 100%;:
#nested_table {
width: 100%;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table id="nested_table" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
I don't know why you are nesting the tables since you get exactly the same result without nesting and a little css for the table row:
#secondTable tr {
display: flex;
align-items: center;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
...and width right alignment:
#secondTable tr {
display: flex;
align-items: center;
}
#secondTable td {
width: 50%;
}
#secondTable td p {
text-align: right;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>

Since you are using "h5" tag inside a "td" ;it create a margin , so you have to remove it:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr >
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5 style="margin-block-start:0; margin-block-end:0;">
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
<p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

Don't like tables approach, but starting from your snippet a possible solution is alter "Rate" td:
<td style="vertical-align:bottom;height:90px;">
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td style="vertical-align:bottom;height: 90px;">
<p>
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

You may be able to utilize display: flex or display: grid to achieve this. I don't have a snippet that you can copy/paste, but these links above have a few.

maybe this can help,
you want result like this ?
table {
flex-wrap: nowrap;
}
table h5 {
display: inline-block;
}
table table {
display: inline-block;
vertical-align: middle;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

Force page break after so many lines?

we're using Coldfusion and SQL and are trying to make a page with a query with only one tablr with one row and need it to force a page break after so many rows. We could also have it force a page break after 8x11 page is filled. I'm using a header and it will never show the header on page 2 sense it can't figure out where the page break is. Any help would be great.
Thanks
<head>
<script>
thead {
position: sticky;
top: 0px;
}
</script>
</head>
<thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<td bgcolor="#EDE9C6" width="5px">
<div align="center"><nobr><font size="-2">fmt</font></div>
</td>
<td style="overflow:hidden;" bgcolor="#EDE9C6" width="23px">
<div align="center"><strong><font size="-2"> <nobr> category </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><nobr><font size="-2"> SKU </font></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><strong><nobr><font size="-2"> artist </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><nobr> <font size="-2"> title </font></div>
</td>
<td bgcolor="EDE9C6" width="5px">
<div align="center"><strong><nobr><font size="-2"><strong>qs </strong></font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">fa </font></div></td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><strong><font size="-2"><strong>ts </strong> </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">wtd </font></div>
</td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><strong><font size="-2">mtd </font></strong></div></td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><font size="-2">ytd </font></div></td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><font size="-2"><strong>price</strong></font>
</div></td>
<td bgcolor="EDE9C6" width="15px">
<div align="center"><font size="-2">check</font>
</div></td>
</table></thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<tbody>
<cfoutput query="myquery">
<tr>
<td bgcolor="ffffff" width="5px">
<div align="center"><nobr><font size="-2">#fmt#</font></div>
</td>
<td style="overflow:hidden;" bgcolor="ffffff" width="50px">
<div align="center"><strong><nobr><font size="-2">#Left(catdesc,20)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="20px">
<div align="center"><nobr><font size="-2">#fsku#</font></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><strong><nobr><font size="-2">#Left(artist,25)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><nobr><em><font size="-2">#Left(title,25)#</font> </em></div>
</td>
<td bgcolor="ffffff" width="8px">
<div align="center"><strong><nobr><font size="-2">#fUpStkQty#</font> </strong></div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2"><cfif #Fas# is not "">X<cfelseif #Fas# is ""> </cfif></font></div></td>
<td bgcolor="ffffff" width="12px">
<div align="center"><strong><font size="-2">#fStockQty#</font></strong> </div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2">#fNSWTD1#</font></div>
</td>
<td bgcolor="ffffff" width="12px"><div align="center"><strong><font size="-2">#fNSMTD1#</font></strong></div></td>
<td bgcolor="ffffff" width="12px"><div align="center"><font size="-2">#fNSYTD1#</font></div></td>
<td bgcolor="ffffff" width="20px">
<div align="center"><strong><font size="-2">$#fcost#</font></strong>
</div></td>
<td bgcolor="ffffff" width="15px">
<div align="center"><font size="-2"> </font>
</div></td>
</cfoutput></tbody>
</table>

Sections not displaying in email template

I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->

Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)

Gap between <tr>

I am creating a table that has 2 rows, that has different colors. There appears to be a gap between the rows and I want to close the gap, how can I do that?
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>
I need to use the css <style> because I'm sending this via Email (PHPMailer) and all the text will only be in HTML (+CSS using )

You can try table {border-spacing: 0; }
table {border-spacing: 0; }`
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>

Canvas inside table

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?

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.