响应时电子邮件表格不均匀

时间:2015-06-16 14:51:43

标签: html css responsive-design html-table html-email

小提琴:https://jsfiddle.net/418tv9e9/1/

因此,当我收缩我的html电子邮件模板时,它会收缩并且表格应该均匀分布,但第一列中出现了一些奇怪的间距。

它的外观如下:

现在我尝试了不同的解决方案,但不是@media查询,是否有什么东西我缺失或者我应该去寻找媒体查询(就像我研究过的那样,我知道这不是那种方式去)。

    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin:0; padding:0;" >

<table id="background" align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ebebeb">
  <tr>
    <td align="center">
        <table id="sixfourty" align="center" style="max-width: 640px; width: 100%; font-family: Helvetica;" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>

        <table width="100%" id="logo" border="0" cellspacing="0" cellpadding="0"  bgcolor="#ffffff">

            <tr>

                <td height="60"></td>

            </tr> <!--Spacer -->

            <tr>

                <td align="center">
                    <img src="logorender.png" width="100%" border="0" style="display: block; max-width:189px;"/>
                </td>

            </tr>

            <tr>

                <td height="60"></td>

            </tr> <!--Spacer -->

            <tr height="3">

                <td bgcolor="#e1e1e1"></td>

            </tr> <!--Image Border 3px -->

        </table> <!--End of Table Container -->

        <!--Header -->

        <table id="derheader" width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img src="images/tablev2_01.jpg" width="100%" style="display: block;" alt=""></td>
                <td>
                    <img src="images/tablev2_02.jpg" width="100%" style="display: block;" alt=""></td>
                <td>
                    <img src="images/tablev2_03.jpg" width="100%" style="display: block;" alt=""></td>
            </tr>
            <tr>
                <td>
                    <img src="images/tablev2_04.jpg" width="100%" style="display: block;" alt=""></td>
                <td>
                        <table  border="0" cellspacing="0" cellpadding="0" width="100%" style="border-spacing: 0px;">

                            <tr>
                                <td width="150" >
                                </td>
                            </tr>

                        </table>

                    </td>
                <td>
                    <img src="images/tablev2_06.jpg" width="100%" style="display: block;" alt=""></td>
            </tr>
            <tr>
                <td>
                    <img src="images/tablev2_07.jpg" width="100%" style="display: block;" alt=""></td>
                <td>
                    <img src="images/tablev2_08.jpg" width="100%" style="display: block;" alt=""></td>
                <td>
                    <img src="images/tablev2_09.jpg" width="100%" style="display: block;" alt=""></td>
            </tr>
            <tr height="3">
                <td bgcolor="#e1e1e1" colspan="3">
                </td>
            </tr>
        </table>

        <!--End of Header Table -->

        <table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
              <tr>
                <td width="50"></td>
                <td height="40">
                </td>
                <td width="50"></td>
              </tr>

              <tr>
                <td width="50"></td>
                <td style="font-size:14px; line-height: 20px; font-family: Helvetica, Arial, sans-serif"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim, metus sit amet tincidunt luctus, tellus lectus ultrices dolor, ut faucibus sem mauris in elit. Quisque aliquam sit amet felis vitae sodales.</p>
                </td>
                <td width="50"></td>
              </tr>
              <tr>
                <td width="50"></td>
                <td height="40">
                </td>
                <td width="50"></td>
              </tr>

              <tr>
                <td width="50"></td>
                <td>

                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td height="60" width="100" align="center"><img width="25" src="check.png"/></td>
                            <td style="font-size:16px; font-family: Helvetica, Arial, sans-serif">We have an update!</td>
                          </tr>
                          <tr>
                            <td height="60" width="100" align="center"><img width="25" src="check.png"/></td>
                            <td style="font-size:16px; font-family: Helvetica, Arial, sans-serif">We drank some beers!</td>
                          </tr>
                          <tr>
                            <td height="60" width="100" align="center"><img width="25" src="check.png"/></td>
                            <td style="font-size:16px; font-family: Helvetica, Arial, sans-serif">And we installed japanese porn with english subtitles in your iPhone for you to watch in those long and booring hours of commute.</td>
                          </tr>
                    </table>

                </td>
                <td width="50"></td>
              </tr>

              <tr>
                <td width="50"></td>
                <td height="140" align="center" style="font-size: 16px;  font-family: Helvetica, Arial, sans-serif""> Groetjes! <br /> Team DerVisionar
                </td>
                <td width="50"></td>
              </tr>

              <tr height="3">
                <td bgcolor="#e1e1e1" colspan="3">
                </td>
            </tr>

              <tr bgcolor="#ededed" height="100">
                <td width="50"></td>
                <td style="font-size:11px; font-family: Helvetica, Arial, sans-serif">U ontvangt dit bericht omdat u zich heeft aangemeld voor niteuwe vacatures van dervisionar.nl. 
Ga naar uw voorkeuren. Wilt u geen interessante vacatures meer ontvangen? Klik op afmelden.</td>
                <td width="50"></td>
              </tr>

            </table>

            <!--Content and Footer -->

            </tr></td>
            </table> <!--Sixfourty -->
        </td>
    </tr>
</table>

</body>
</html>

这是我的所有代码,希望这对你来说足够准确。

0 个答案:

没有答案