Yahoo table 居中对齐

Question

<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
    <tr>
        <td width="100%" valign="top">
            <table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
                <tr>
                    <td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
                </tr>
            </table>
            <!-- More tables with content -->
        </td>
    </tr>
</table>
</body>

我对此进行了大量测试和研究。我相信我这样做是正确的，但是当我去测试它时期望 table 以 yahoo 为中心，但事实并非如此！

修复应该是 table-layout: fixed;在外部 table 上，宽度为 100%。

我已经做到了。

所以有谁能发现我在这里做错了什么导致无法正常工作吗？

干杯

Answer 1

下面的代码应该可以修复它。您的电子邮件代码还需要 CSS 重设。

<html>
    <head>
        <style>
            /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
            table {
                border-spacing: 0 !important;
                border-collapse: collapse !important;
                table-layout: fixed !important;
                margin: 0 auto !important;
            }
            table table table {
                table-layout: auto; 
            }
        </style>
    </head>
    <body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
        <center style="width: 100%; background: #f6f6f6;">

            <!-- Your Email Code Begins Here -->
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
                <tr>
                    <td width="100%" valign="top">
                        <table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
                            <tr>
                                <td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
                            </tr>
                        </table>
                        <!-- More tables with content -->
                    </td>
                </tr>
            </table>
            <!-- Your Email Code Ends Here -->

        </center>
    </body>
</html>

Yahoo table 居中对齐

Yahoo table centering alignment

css

yahoo

html-email