我观察到这个表偏离了它指定的宽度。当我向其中一个单元格添加一个表时，表伸展..我试图调试它但没有用。突出显示的部分是延伸的表它......我怎么解决这个问题？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="720" border="1" align="center">
<!-- first part -->
<tr>
<td valign="top">
<!-- Start top spacer -->
<table width="720" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-top_2.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End top spacer -->
</td>
</tr>
<tr>
<td valign="top" bgcolor="#99FFFF">
<!-- Start body -->
<table width="720" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" >
<!-- start main body -->
<table cellspacing="0" cellpadding="0" width="662">
<tr>
<td>Main content
</td>
</tr>
</table>
</td>
<!-- End main body -->
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End body -->
</td>
</tr>
<tr>
<td valign="top">
<!-- Start bottom spacer -->
<table width="720" border="0" align="center">
<tr>
<td valign="top">
<img src="Spacer-bottom_left.jpg" width="46" height="21" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-bottom_top.jpg" width="21" height="21" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-bottom_right.jpg" width="52" height="21" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End bottom spacer -->
</td>
</tr>
<!-- /first part -->
</table>
</body>
</html>
答案 0 :(得分：1)
请尝试以下代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="720" border="1" align="center">
<!-- first part -->
<tr>
<td valign="top">
<!-- Start top spacer -->
<table style="width:100%" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-top_2.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End top spacer -->
</td>
</tr>
<tr>
<td valign="top" bgcolor="#99FFFF">
<!-- Start body -->
<table style="width:100%" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" >
<!-- start main body -->
<table cellspacing="0" cellpadding="0" width="662">
<tr>
<td>Main content
</td>
</tr>
</table>
</td>
<!-- End main body -->
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End body -->
</td>
</tr>
<tr>
<td valign="top">
<!-- Start bottom spacer -->
<table style="width:100%" border="0" align="center">
<tr>
<td valign="top">
<img src="Spacer-bottom_left.jpg" width="46" height="21" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-bottom_top.jpg" width="21" height="21" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-bottom_right.jpg" width="52" height="21" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End bottom spacer -->
</td>
</tr>
<!-- /first part -->
</table>
</body>
</html>
答案 1 :(得分：1)
您可以使用“主要内容”从表中删除width =“662”吗？这似乎在jsfiddle上为我解决了......