Why this table is stretching?
I have observed this table deviates from its specified width..As I add a table to one of its cell, the table stretches..I tried to debug it but to no avail..The highlighted part is the table that stretches it..How can I fix this?
<!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>
开发者_JAVA技巧 </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>
http://jsfiddle.net/vq8hg/2/
Try code below.
<!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>
Can you remove the width="662" from the table with "Main Content?" That appeared to fix it for me on jsfiddle...
加载中,请稍侯......
精彩评论