开发者

Why this table is stretching?

开发者 https://www.devze.com 2023-03-18 00:22 出处:网络
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 stre

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...

0

精彩评论

暂无评论...
验证码 换一张
取 消