TD繼承表寬度

Question

我面臨的問題是，我的表中的TD仍在繼承表的寬度，儘管它自己的寬度明確設置。

的代碼如下：

<div class="widget widget-new-products"> 
    <div class="widget-products"> 
     <table cellspacing="0" width="640px" cellpadding="0" border="0" align="center"> 
       <tr> 
        <td> 
          <img src="header.gif" alt="New Releases"> 
        </td> 
      </tr> 

         <tr style="font-size: 0;"> 

           <td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td> 

           <td width="85px"> 
            <a href="" title="" class="product-image"><img src="product1.jpg" width="85" height="85" alt="image" ></a> 
           </td> 

           <td width="100px"> 
            <a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a> 
           </td> 

           <td width="100px" align="right"> 
            <p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p> 
            <a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a> 
           </td> 

           <td width="10px"> 
           </td> 

           <td width="85px"> 
            <a href="" title="" class="product-image"><img src="product2.jpg" width="85" height="85" alt="" ></a> 
           </td> 

           <td width="100px"> 
            <a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a> 
           </td> 

           <td width="100px" align="right"> 
            <p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p> 
            <a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a> 
           </td> 

           <td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td> 

         </tr> 

       <tr> 
        <td> 
          <img src="footer.gif" alt=""> 
        </td> 
      </tr> 

     </table> 
    </div> 
</div> 

具體而言，受到影響的TD是在表中的第一：

<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td> 

其被繼承的640像素表寬度，而不是30px它應該是。

它似乎不管我改變什麼，問題仍然存在..我已經在本地和JSFiddle測試。

我沒有經驗的HTML，所以我不知道什麼問題。

更新的代碼

 <div class="widget widget-new-products"> 
    <div class="widget-products"> 
     <table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;"> 
       <tr> 
        <td colspan="8"> 
          <img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases"> 
        </td> 
       </tr> 

       <tr> 

         <td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td> 

         <td width="85"> 
          <a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" ></a> 
         </td> 

         <td width="100"> 
          <a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a> 
         </td> 

         <td width="111" align="right"> 
          <p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p> 
          <a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a> 
         </td> 

         <td width="85"> 
          <a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" ></a> 
         </td> 

         <td width="100"> 
          <a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a> 
         </td> 

         <td width="111" align="right"> 
          <p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p> 
          <a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a> 
         </td> 

         <td width="30"> 
          <img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt=""> 
         </td> 

       </tr> 

       <tr> 
        <td colspan="8"> 
         <img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt=""> 
        </td> 
      </tr> 

     </table> 
    </div> 
</div> 

我現在有上面和下面的中間行，我無法擺脫的差距。