Question

这是一封HTML电子邮件。

我在彼此里面有两张桌子。一个设置为100％，另一个设置为700px宽。

这是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;}

任何建议将不胜感激。

Answer 1

您已将外表中的表格单元格设置为700px宽，这与表格的100％宽度相冲突。删除表格单元格上的宽度。

Answer 2

对于惯例，元素不会居中，所以..容器（单元格）应该将元素放在内部（表格）：

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

为什么桌子不在Explorer的中心？

2 个答案: