CODEWITHSUNDEEP
htmlcssemailresponsive-design
content01
content01

Reputation: 3225

How to make table 100% width with image inside and align left for emails

I have the following structure:

<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile" style="margin: 0 auto;">
    <tbody>
        <tr>
            <td width="100%">                                   
                <!-- Space -->
                <table width="500" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
                    <tbody><tr>
                        <td width="100%" height="30"></td>
                    </tr>
                </tbody></table><!-- End Space -->

                <!-- Icon 1 -->
                <table width="115" height="100" border="0" cellpadding="0" cellspacing="0" style="float: left; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center; margin: 0 auto; border-right: 1px solid #d7d7d7; background-color: red;" class="fullCenter setFloatNone">
                    <tbody>
                        <tr>
                            <td valign="middle" width="100%" mc:edit="m28" class="fullCenter">
                                <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fullCenter" >
                                    <tbody>
                                        <tr>
                                            <td width="100%" height="100" style="text-align: center;">
                                                <img src="images/icon1.png" width="35" alt="" border="0" mc:edit="m06"/>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- Icon 1 Text -->
                <table width="365" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; background-color: blue;" class="fullCenter">
                    <tbody>
                        <tr width="100%">
                            <td valign="middle" width="100%" height="100" mc:edit="m28" class="fullCenter">
                                <p style="font-weight: 700; font-size: 20px; color: #000000; font-family: 'Open Sans', Arial, sans-serif; line-height: 23px; margin-top: 0px; margin-bottom: 5px;" class="font20 centeredP">
                                    <font face="'Open Sans', Arial, sans-serif">text</font>
                                </p>
                                <p style="font-size: 16px; color: #474747; font-family: 'Open Sans', Arial, sans-serif; line-height: 24px; margin-top: 0px; margin-bottom: 0px;" class="font16 centeredP">
                                    <font face="'Open Sans', Arial, sans-serif">more text here</font>
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>                        
            </td>
        </tr>
    </tbody>
</table><!-- End Wrapper -->
<!-- Space -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
    <tbody>
        <tr>
            <td width="100%" height="60"></td>
        </tr>
    </tbody>
</table><!-- End Space -->
<!-- END TEST -->

and my css:

<style type="text/css"> 
    @media only screen and (max-width: 640px){
        body{width:auto!important;}
        td[class=showThreeRows] {padding-left: 80px !important; padding-right: 80px !important;}

        table[class=full] {width: 100%; clear: both; }
        table[class=mobile] {width: 100%; padding-left: 20px; padding-right: 20px; clear: both; }
        table[class=fullCenter] {width: 100%; text-align: center !important; clear: both; }
        td[class=fullCenter] {width: 100%; text-align: center !important; clear: both; }

        td[class=fullCenter2] {width: 100%; text-align: center !important; clear: both; display: block; margin: 0 auto; }


        td[class=fullCenter] p { width: 100%; text-align: center !important; clear: both; padding-left: 25px; padding-right: 25px; color: red;}
        td[class=removePadding] { width: 100%; text-align: center !important; clear: both; padding: 0px !important; }

        td[class=textCenter] {width: 100%; text-align: center !important; clear: both; }
        table[class=headerScale] {width: 100%!important; text-align: center!important; clear: both; }
        .headerScale img {width: 100%!important; height: auto;}
        table[class=vidScale] {width: 100%!important; text-align: center!important; clear: both; }
        .vidScale img {width: 100%!important; height: auto;}
        .erase {display: none;}
        table[class=screenLeft] {padding-right: 6px;}
        table[class=screenRight] {padding-left: 6px;}
        .font20 {font-size: 20px!important; line-height: 30px!important;}
        table[class=w90] {width: 90%!important;}
        table[class=icon] {width: 100%; text-align: center!important; clear: both; }
        table[class=imageMobile] {width: 100%; clear: both;}
        table[class=imageMobile] {width: 100%; clear: both;}
        .imageMobile img {width: 80%!important; height:auto!important;}
        .voucher1 {width: 100%!important; border-left: none!important; text-align: center!important;}
        .fullOne {background-color: #efefef; height: 1px!important;}
        .centeredP {text-align: center !important; color: red !important;}
        <!--[if !IE]> -->
        .font36 { font-size: 50px !important; line-height: 55px !important;}
        .font30top { font-size: 66px !important; line-height: 69px !important;}
        .font30 { font-size: 53px !important; line-height: 58px !important;}
        .font20 { font-size: 40px !important; line-height: 45px !important; }
        .font18 { font-size: 36px !important; line-height: 45px !important;}
        .font16 { font-size: 27px !important; line-height: 34px !important;}
        <!-- <![endif]-->
    } 
</style>

The issue is that the first table with the icon1.png renders all aligned to the left in my android (Nexus 4) instead of setting the table to 100% (like the 2nd table with the text) and aligning the icon to the middle.

Any ideas?

screenshot - the red row is the issue

Upvotes: 1

Views: 3896

Answers (1)

Fabian Mebus
Fabian Mebus

Reputation: 2415

You have a css selector that selects table elements which have only the one class fullCenter an no other classes:

table[class=fullCenter] {
  width: 100%;
  text-align: center !important;
  clear: both;
}

That is the reason why your <table ... class="fullCenter setFloatNone"> does not get selected. If you change your selector to

table.fullCenter {
  width: 100%;
  text-align: center !important;
  clear: both;
}

you should be fine.

Upvotes: 1

Related Questions