Width not working on table cells

Question

For some reason when I set the width for a cell in a table it does not affect the width of the cell. FYI I'm using inline styles for 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 were honoured to attend and support such a fantastic conference, congratulations to everyone that won a 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 you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to 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>

https://jsfiddle.net/xmbsemje/

Answer 1

td's default behaviour is to fill the width of the table, so if you only have one <td> per row <tr>, it would always go full width of the table no matter what you do. One approach is to create a table inside that td and put the width on table instead. Also padding left and right doesn't work in emails, so creating tables with defined width and centering them is the best option.

The other approach would be to have spacer cells on left and right to give you padding space. I modified your code (just the text cells with blue/red and white background) following the first approach.

Please note: I didn't fix all of your code, just change a couple to get you 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 were honoured to attend and support such a fantastic conference, congratulations to everyone that won a 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 you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to 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>

Answer 2

last td width 550px so not effect your width 80%;

so you can add width on span tag