html - 简单的 HTML & css 表格愚蠢问题，简单的解决方案

Question

我有这个简单的表格简报设计，但我无法确定是什么原因导致表格比我设置的要宽。

    <table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" max-width="600" style="height:auto;" >
  <tr>
    <td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      <table border="1" cellpadding="0" cellspacing="30" max-width="600">
        <tr>
          <td align="center"><br>
            <img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
            </td>
        </tr>
        <tr>
          <td align="center" valign="middle">
           <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
            <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
            WEBSITE</anpa>
            <anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
            FORWARD</anpa>
            <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
            SUBSCRIBE</anpa>
            <anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
            UNSUBSCRIBE<br>
            </anpa></font>
          </td>
        </tr>
        <tr>
          <td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
          <anpa href="http://www.bdforum.org">
          Baltic Development Forum</anpa></font></td>
        </tr>

        <tr>
            <td align="center">
            <font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">

        LATEST BDF NEWS ESPECIALLY FOR YOU
              </font></td>
        </tr>

        <tr>
        <td align="center">
            <!-- <td  align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
            <anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
            WEBSITE</anpa>
            </td>-->

            <div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>
            </td>
        </tr>
      </table>
      <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
  </tr>
</table>

如果你能帮助我，我将不胜感激。我有点初学者。尤其是为电子邮件编写 html，因为它对不同的支持非常烦人

Answer 1

因为您必须将 max-width="600" 放在样式属性中，因为 max-width 不是 table 的有效属性，像这样解决你的问题 style="height:auto;max-width:600px"

更新

要处理右侧和底部的额外像素，请将此 style="padding: 0;width: 100%;" 添加到第一个 td