html - 如何使表格 100% 宽度，里面有图像，并为电子邮件左对齐

Question

我有以下结构:

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

和我的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>

问题是第一个带有 icon1.png 的表格在我的 android (Nexus 4) 中呈现为全部向左对齐，而不是将表格设置为 100%(就像带有文本的第二个表格)并将图标对齐到中间。

有什么想法吗？

Answer 1

你有一个 css 选择器，它选择只有一个类 fullCenter 的表格元素。没有其他类:

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

这就是为什么你的 <table ... class="fullCenter setFloatNone">没有被选中。如果您将选择器更改为

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

你应该没问题。