响应式 html 电子邮件模板有问题

Question

我希望在分隔符之后，下一列会像响应式一样正常工作。

我还认为上面的 html 代码有问题，它的行为不像响应式。

这是一个代码笔示例：https://codepen.io/aman111/pen/YQGzGd?editors=1000

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>

    @media only screen and (max-width:480px){
    table td[class="divider"] {
    display: none !important;
    }

    table td[class="one"] {
    width:100% !important;
    }
    .left {
    width: 100% !important;

    }
    .right {
    width: 100% !important;

    }
    }

    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%">
        <tr>
            <td class="one" style=" padding:10px 0 10px 10px;" width="40%">
                <table border="0" cellpadding="0" cellspacing="0" class="left" width="100%">
                    <tr>
                        <td valign="top" width="100%">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
                                </tr>
                                <tr>
                                    <td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
                                        <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
                                            <tr>
                                                <td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
                                                <td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="divider" style="background-color: red;" width="1"></td>
                    </tr>
                </table>
            </td>
            <td class="two" style=" padding:10px 10px 10px 0;" width="40%">
                <table border="0" cellpadding="0" cellspacing="0" class="right" width="100%">
                    <tr>
                        <td class="divider" style="background-color: red;" width="2"></td>
                        <td>
                            <table>
                                <tr>
                                    <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
                                </tr>
                                <tr>
                                    <td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
                                        <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
                                            <tr>
                                                <td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
                                                <td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>------------------------ Has anyone faced this kind of issue if solve it then please help me out Actually i want after the divider next column will come down like responsive thing works right. Also i think above html code having issue it's not behaving like responsive. Please guys look into this and help me out. Many thanks
</body>
</html>

Answer 1

代码应该是这样的。它考虑到 Android 不读取 TD 以分成行并使用 Gmail 也应该读取的 CSS。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>

    @media screen and (max-width:480px){
    .divider {display: none !important;}
 .break th{display:block !important; width:100% !important;}
    }

    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%" class="break">
        <tr>
            <th style=" padding:10px 0 10px 10px;font-weight:normal;margin:0px;" width="40%">
                <table border="0" cellpadding="0" cellspacing="0" class="left" width="100%">
                    <tr>
                        <td valign="top" width="100%">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
                                </tr>
                                <tr>
                                    <td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
                                        <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
                                            <tr>
                                                <td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
                                                <td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="divider" style="background-color: red;" width="1"></td>
                    </tr>
                </table>
            </th>
            <th style=" padding:10px 10px 10px 0;font-weight:normal;margin:0px;" width="40%">
                <table border="0" cellpadding="0" cellspacing="0" class="right" width="100%">
                    <tr>
                        <td class="divider" style="background-color: red;" width="2"></td>
                        <td>
                            <table>
                                <tr>
                                    <td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
                                </tr>
                                <tr>
                                    <td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
                                        <table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
                                            <tr>
                                                <td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
                                                <td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </th>
        </tr>
    </table>
</body>
</html>

让我知道这是否适合你。

响应式 html 电子邮件模板有问题

Having issue with the responsive html email template

html

css

email-templates

media-queries

responsive