title: TD Inheriting TABLE width
body: <p>The issue I'm facing is that a TD in my table is inheriting the table's width despite having it's own width explicitly set.</p>
  
  <p>The code is as follows:</p>
  
  <pre><code>    &lt;div class="widget widget-new-products"&gt;
      &lt;div class="widget-products"&gt;
          &lt;table cellspacing="0" width="640px" cellpadding="0" border="0" align="center"&gt;
                 &lt;tr&gt;
                      &lt;td&gt;
                              &lt;img src="header.gif" alt="New Releases"&gt;
                      &lt;/td&gt;
              &lt;/tr&gt;
  
                         &lt;tr style="font-size: 0;"&gt;
  
                                  &lt;td width="30px"&gt;&lt;img width="30px" height="95px" src="leftsep.gif" alt="" &gt;&lt;/td&gt;
  
                                  &lt;td width="85px"&gt;
                                     &lt;a href="" title="" class="product-image"&gt;&lt;img src="product1.jpg" width="85" height="85" alt="image" &gt;&lt;/a&gt;
                                  &lt;/td&gt;
  
                                  &lt;td width="100px"&gt;
                                      &lt;a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href=""&gt;item 1&lt;/a&gt;
                                  &lt;/td&gt;
  
                                  &lt;td width="100px" align="right"&gt;
                                      &lt;p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;"&gt;£30.00&lt;/p&gt;
                                      &lt;a href=""&gt;&lt;img src="view-product.jpg" height="30px" width="111px" alt="View Product"&gt;&lt;/a&gt;
                                  &lt;/td&gt;
  
                                 &lt;td width="10px"&gt;
                                 &lt;/td&gt;
  
                                  &lt;td width="85px"&gt;
                                     &lt;a href="" title="" class="product-image"&gt;&lt;img src="product2.jpg" width="85" height="85" alt="" &gt;&lt;/a&gt;
                                  &lt;/td&gt;
  
                                  &lt;td width="100px"&gt;
                                      &lt;a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href=""&gt;item 2&lt;/a&gt;
                                  &lt;/td&gt;
  
                                  &lt;td width="100px" align="right"&gt;
                                      &lt;p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;"&gt;£10.00&lt;/p&gt;
                                      &lt;a href=""&gt;&lt;img src="view-product.jpg" height="30px" width="111px" alt="View Product"&gt;&lt;/a&gt;
                                  &lt;/td&gt;
  
                                  &lt;td width="30px"&gt;&lt;img width="30px" height="95px" src="rightsep.gif" alt=""&gt;&lt;/td&gt;
  
                          &lt;/tr&gt;  
  
                  &lt;tr&gt;
                      &lt;td&gt;
                              &lt;img src="footer.gif" alt=""&gt;
                      &lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Specifically, the TD being affected is the first in the table:</p>
  
  <pre><code>&lt;td width="30px"&gt;&lt;img width="30px" height="95px" src="leftsep.gif" alt="" &gt;&lt;/td&gt;
  </code></pre>
  
  <p>Which is inheriting the table width of <strong>640px</strong> instead of the <strong>30px</strong> it should be.</p>
  
  <p>It seems regardless of what I change, the issue is still there.. I've tested both locally and in JSFiddle.</p>
  
  <p>I'm by no means experienced in HTML so I'm not sure what the problem is.</p>
  
  <p><strong>Updated Code</strong></p>
  
  <pre><code>        &lt;div class="widget widget-new-products"&gt;
      &lt;div class="widget-products"&gt;
          &lt;table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;"&gt;
                 &lt;tr&gt;
                      &lt;td colspan="8"&gt;
                              &lt;img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
  
                          &lt;td width="30"&gt;&lt;img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" &gt;&lt;/td&gt;
  
                          &lt;td width="85"&gt;
                             &lt;a href="" title="" class="product-image"&gt;&lt;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" &gt;&lt;/a&gt;
                          &lt;/td&gt;
  
                          &lt;td width="100"&gt;
                              &lt;a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href=""&gt;Clydie King - Direct Me - Inc Never Like This Before&lt;/a&gt;
                          &lt;/td&gt;
  
                          &lt;td width="111" align="right"&gt;
                              &lt;p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;"&gt;£30.00&lt;/p&gt;
                              &lt;a href=""&gt;&lt;img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"&gt;&lt;/a&gt;
                          &lt;/td&gt;
  
                          &lt;td width="85"&gt;
                             &lt;a href="" title="" class="product-image"&gt;&lt;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="" &gt;&lt;/a&gt;
                          &lt;/td&gt;
  
                          &lt;td width="100"&gt;
                              &lt;a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href=""&gt;T.M.V.S. - Don't Be Shy&lt;/a&gt;
                          &lt;/td&gt;
  
                          &lt;td width="111" align="right"&gt;
                              &lt;p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;"&gt;£10.00&lt;/p&gt;
                              &lt;a href=""&gt;&lt;img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"&gt;&lt;/a&gt;
                          &lt;/td&gt;
  
                          &lt;td width="30"&gt;
                              &lt;img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt=""&gt;
                          &lt;/td&gt;
  
                  &lt;/tr&gt;  
  
                  &lt;tr&gt;
                      &lt;td colspan="8"&gt;
                          &lt;img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt=""&gt;
                      &lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I now have a gap above and below the middle row which I can't get rid of.</p>