解决table表格溢出错乱的问题

项目背景：

  在做一个邮件自动推送数据报表的任务时，发现在不同的邮件客户端中，报表布局会错乱，特别是outlook中css样式，浮动布局容易溢出，foxmail对html的支持倒是很不错。

经过测试，发现不管是新型邮件客户端还是老的对table布局支持很好，邮件中采用table布局符合需求。

出现的table溢出异常截图

代码：

<table width="950" border="0" cellpadding="0" cellspacing="0"  style="width:1000px;white-space:normal;font-family:'微软雅黑'; word-break:break-all;" >
 
<tr>
</table>
	<td width="950"  colspan='2' style="text-align: left; width:950px;" cellspacing="0" cellpadding="0">  
			<h2>二、用户基础数据：</h2>
		    <p><SPAN style="FONT-FAMILY: Wingdings; FONT-SIZE: 12pt">Ø</SPAN> 本周PCU最高为<b><?php echo $this->data['wData']['maxOnline_t'];?></b>，较上周同比：<?php echo $this->data['wData']['maxOnline_r2r'];?>%；</p>
		    <p><SPAN style="FONT-FAMILY: Wingdings; FONT-SIZE: 12pt">Ø</SPAN> 周活跃用户有<b><?php echo $this->data['wData']['ActUser'];?></b>，新进用户有<b><?php echo $this->data['wData']['NewUser'];?></b>，占<?php echo $this->data['wData']['NewInTotal_r'];?>%；老用户<b><?php echo $this->data['wData']['oldUser'];?></b>，占<?php echo $this->data['wData']['OldInTotal_r'];?>%；  </p>
	</td>
 </tr>

 <tr>
			<td id="part2_1" style="width:450px;height:350px;"><img src="images/part2_1.png"  /></td>
			<td id="part2_2" style="width:450px;height:350px;"><img src="images/part2_2.png"  /></td>
				
	</td>
 </tr>
 
  <tr style="text-align: left; ">
		<td width='500'  style="width:500px;height:350px; overflow:hidden;" id="part2_3" cellspacing="0" cellpadding="0">
			 <img src="images/part2_3.png"   alt="新注册用户"/> 
        </td>
        <td width='340' style="width:500px;height:350px;" cellspacing="0" cellpadding="0">
        	<SPAN style="FONT-FAMILY: Wingdings; FONT-SIZE: 12pt">Ø</SPAN>  本周新进用户总数<b><?php echo $this->data['wData']['NewUser'];?></b>，与上周新进<b><?php echo $this->data['wData']['NewUser_y'];?></b>同比：<i><?php echo $this->data['wData']['NewUser_r2r'];?>%</i>；<br/>   
	        	<p style="color:red;"><textarea style="width:340px;height:100px;">结论： </textarea></p>
        </td>
  </tr>

问题原因：

table中设置两个td的width加起来不等于table设置的width，导致td被内容撑开

解决办法：

table布局下的td 宽度之和要等于设置的width宽度，有个简写方式。

使用colgroup统一设置td的宽度

<colgroup>
<col width="526" />
<col width="474" />
</colgroup>

 修改后代码如下

<table width="1000" border="0" cellpadding="0" cellspacing="0"  style="width:1000px;white-space:normal;font-family:'微软雅黑'; word-break:break-all;" >
	<colgroup>
		<col width="526" />
		<col width="474" />
	</colgroup>
<tr>
	<td colspan='2' style="text-align:left">  
			<h2>二、用户基础数据：</h2>
		    <p><SPAN style="FONT-FAMILY: Wingdings; FONT-SIZE: 12pt">Ø</SPAN> 本周PCU最高为<b><?php echo $this->data['wData']['maxOnline_t'];?></b>，较上周同比：<?php echo $this->data['wData']['maxOnline_r2r'];?>%；</p>
		    <p><SPAN style="FONT-FAMILY: Wingdings; FONT-SIZE: 12pt">Ø</SPAN> 周活跃用户有<b><?php echo $this->data['wData']['ActUser'];?></b>，新进用户有<b><?php echo $this->data['wData']['NewUser'];?></b>，占<?php echo $this->data['wData']['NewInTotal_r'];?>%；老用户<b><?php echo $this->data['wData']['oldUser'];?></b>，占<?php echo $this->data['wData']['OldInTotal_r'];?>%；  </p>
	</td>
 </tr>

 <tr>
			<td id="part2_1" style="height:350px;"><img src="images/part2_1.png"  /></td>
			<td id="part2_2" style="height:350px;"><img src="images/part2_2.png"  /></td>
				
	</td>
 </tr>
 
  <tr style="text-align: left; ">
		<td  style="height:350px; overflow:hidden;" id="part2_3">
			 <img src="images/part2_3.png"   alt="新注册用户"/> 
        </td>
        <td style="height:350px; vertical-align:top;">
        	<SPAN style="FONT-FAMILY: Wingdings; FONT-SIZE: 12pt">Ø</SPAN>  本周新进用户总数<b><?php echo $this->data['wData']['NewUser'];?></b>，与上周新进<b><?php echo $this->data['wData']['NewUser_y'];?></b>同比：<i><?php echo $this->data['wData']['NewUser_r2r'];?>%</i>；<br/>   
	        	<p style="color:red;"><textarea style="width:340px;height:100px;">结论： </textarea></p>
        </td>
  </tr>

 </table>

正常截图：

还是对table布局不够熟悉、发布保存下来，希望看到的人不要在table溢出上再被坑。