如何保持表格的宽度？

Question

我正在尝试为电子邮件模板设置一个表格，顶部的图像占据整个宽度（600 像素），然后是两列从中间分开的图像。但由于某种原因，右列将表格宽度推得太右了。

JS 小提琴：http://jsfiddle.net/5QEhK/1/

<table width="600" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">


    <!--Main Image-->

       <tr align="center" valign="center" width="580px">
           <td align="center" valign="center" width="580px">
               <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
           </td>
       </tr> 



    <!--Two Columns-->
                 <tr>
                    <td valign="top" width="260" class="leftColumnContent">
                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/></a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>


                    <td valign="top" width="260" class="rightColumnContent">

                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
                                </td>
                            </tr>

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

    </table>​

Answer 1

您的第一个问题是您的主图像部分中有单个 td，它应该是 colspan="2" 像这样。

   <!--Main Image-->

   <tr align="center" valign="center" width="580">
       <td align="center" valign="center" colspan="2">
           <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
       </td>
   </tr> 

其次，这不是问题，但属性width 的值为“px”是错误的。

如果宽度是作为一个属性来的，它应该不带“px”使用，如果 宽度以css样式出现，那么它需要有一些 度量单位，如“px”、“em”、“pt”

检查这个DEMO

Answer 2

试试这个代码

我已经删除了一些样式，但你可以把它放回去，理想情况下你应该只使用 colspan 来满足这种要求

<table width="600px" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">
<!--Main Image-->

<tr>
   <td colspan="2" valign="center">
       <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png">
   </td>
</tr>

<!--Two Columns-->
<tr>
  <td valign="top" width="50%" class="leftColumnContent"> 
    <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/>
  </td>
  <td valign="top" width="50%" class="rightColumnContent">
      <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
  </td>  
</tr>              
</table>