html - Width not working on table cells -
for reason when set width cell in table not affect width of cell. fyi i'm using inline styles mailers.
<table cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;"> <tr> <td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">hunters conference 2017</span></td> </tr> <tr> <td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">fyber honoured attend , support such fantastic conference, congratulations won prize on our wheel of fortune!</span></td> </tr> <tr> <td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">we hope had great day, enjoyed catching , nice see our clients face face. </span></td> </tr> <!--[if mso]> <tr> <td style="padding-bottom: 20px;"> <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="spinning wheel" width="550" style="width: 100%; max-width: 550px;"> </td> </tr> <![endif]--> <!--[if !mso]><!-- --> <tr> <td style="padding-bottom: 20px;"> <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="spinning wheel" width="550" style="width: 100%; max-width: 550px;"> </td> </tr> <!--<![endif]--> </table> </td> </tr> </table>
td's default behaviour fill width of table, if have 1 <td> per row <tr>, go full width of table no matter do. 1 approach create table inside td , put width on table instead. padding left , right doesn't work in emails, creating tables defined width , centering them best option.
the other approach have spacer cells on left , right give padding space. modified code (just text cells blue/red , white background) following first approach.
please note: didn't fix of code, change couple started
<table cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;"> <tr> <td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">hunters conference 2017</span></td> </tr> <tr> <td align="center" style="padding: 20px 0; background-color: blue;"> <table border="0" cellpadding="0" cellspacing="0" style="width:80%;"> <tr> <td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">fyber honoured attend , support such fantastic conference, congratulations won prize on our wheel of fortune!</span></td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding: 20px 0;"> <table border="0" cellpadding="0" cellspacing="0" style="width:80%;"> <tr> <td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">we hope had great day, enjoyed catching , nice see our clients face face. </span></td> </tr> </table> </td> </tr> <!--[if mso]> <tr> <td style="padding-bottom: 20px;"> <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="spinning wheel" width="550" style="width: 100%; max-width: 550px;"> </td> </tr> <![endif]--> <!--[if !mso]><!-- --> <tr> <td style="padding-bottom: 20px;"> <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="spinning wheel" width="550" style="width: 100%; max-width: 550px;"> </td> </tr> <!--<![endif]--> </table> </td> </tr> </table>
Comments
Post a Comment