为什么表格不在资源管理器中居中？答案

【问题标题】：Why isn't the table centered in Explorer?为什么表格不在资源管理器中居中？
【发布时间】：2010-12-18 13:42:34
【问题描述】：

这是一封 HTML 电子邮件。

我有两张桌子在里面。一个设置为 100%，另一个设置为 700 像素宽。

这是 HTML：

<table width="100%" border="0" align="center" cellspacing="0">
  <tr>
    <td width="700">


    <table width="700" border="0" align="center" cellspacing="0">


      <tr>
        <td colspan="2" align="center"><img src="i/header.jpg" width="700" height="935" alt="10 Good Reasons" /></td>
      </tr>
      <tr>
        <td width="700"><img src="i/reasons.jpg" alt="10 Reasons to celebrate" /></td>

      </tr>

      <tr>
        <td colspan="2"><p class="details">Thursday December 3rd <br />
          The Kings Head, 357 King William Street <br />
          4pm until 8ish.        
          <p class="details"> 
          <img src="i/hr.jpg" />
          <p class="details"><a href="mailto:admin@wdmadvertising.com.au"><img src="i/rsvp.jpg" alt="RSVP" /></a></td>
      </tr>

      <tr>

      <td><p class="unsubscribe"><a href="mailto:admin@wdmadvertising.com.au">Please  RSVP before November 27th.</a>
        <unsubscribe>Click here to unsubscribe.</unsubscribe></p></td>

      </tr>

    </table></td>
  </tr>


</table>

这是 CSS：

/*//////////////ERIC MEYER RESET RELOADED////////////*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */

caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


body {
    background-image: url(i/bg.jpg);
    background-repeat: repeat-y;
    background-position: 50% 50%;
    background-color: #888989;
}


img.top {margin-left:auto; margin-right:auto;display:block;}
img.bottom {margin-left:auto; margin-right:auto;display:block;}


p.details {
    color: #666666;
    font: 32px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    padding-bottom:5px;
    padding-top:20px;
}

p.unsubscribe a {
    text-decoration: none;
    color: #666666;
}

p a:hover {
    text-decoration:underline;}

p.unsubscribe {
    color: #666666;
    font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    padding-bottom:20px;
    padding-top:20px;
    }

table table {margin-left: auto; margin-right: auto;}

a.in-a-browser {
margin-left:auto;
margin-right:auto;
display:block;
width: 1028px;
height: 64px;
background-image:url(i/top.jpg);
text-align:center;
color: #666666;
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-top:0px;
}


td {text-align:center;}
tr {text-align:center;}
table {text-align:center;}

任何建议将不胜感激。

【问题讨论】：

HTML 电子邮件？你准备好 Panadol 或 Herron 了吗？
@Jordan：至少在 Chromuim/Firefox 中对我来说似乎还可以。顺便说一句，您的退订链接不存在
感谢@RageZ Campaign Monitor 添加此链接。

标签： html css email internet-explorer html-table

【解决方案1】：

为了惯例，一个元素不会自己居中，所以.. 容器（单元格）应该在内部（表格）中居中元素：

<td align="center" ..>
   <table etc etc>

【讨论】：

【解决方案2】：

您已将外部表格中的表格单元格设置为 700 像素宽，这与表格的 100% 宽度冲突。移除表格单元格的宽度。

【讨论】：