title: Table borders not showing correctly
body: <p>I am currently trying to get bottom borders on each row within a table, however they don't quite touch the outer border I have on the table. There seems to be some odd spacing between the <code>tr</code> and the <code>table</code> tags, but I can't quite work out what it is. </p>
  
  <p>I have tried playing around with the various table CSS properties (<code>border-collapse</code>, <code>border-spacing</code>), but still can't seem to remove this gap.</p>
  
  <p><img src="https://i.stack.imgur.com/dJnHA.jpg" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#order_review .shop_table_wrap {
    border: 1px solid #e1e1e2;
    box-shadow: 0 0 0 6px #f6f6f6;
    margin-bottom: 60px;
  }
  
  #order_review .shop_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0px;
  }
  
  #order_review .shop_table th {
    color: #2566AC;
  }
  
  #order_review .shop_table thead {
    background: #e9eff7;
    border: 10px solid #fff;
  }
  
  #order_review .shop_table thead th {
    text-align: left;
    padding: 16px 20px;
  }
  
  #order_review .shop_table tr td,
  #order_review .shop_table tr th {
    padding: 16px 20px;
    text-align: left;
  }
  
  #order_review .shop_table tr.cart_item {
    border-bottom: 1px solid #eaeaea;
  }
  
  #order_review .shop_table tfoot tr:last-child {
    background: #feece2;
    border: 10px solid #fff;
  }
  
  #order_review .shop_table tfoot tr.cart-subtotal {
    border-bottom: 2px solid #eaeaea;
  }
  
  #order_review .shop_table tfoot tr:last-child {
    text-align: left;
    padding: 16px 20px;
  }
  
  #order_review .shop_table tfoot tr:last-child th {
    padding: 16px 20px;
  }
  
  #order_review .shop_table tfoot tr:last-child td {
    padding: 16px 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative;" id="order_review"&gt;
    &lt;div class="shop_table_wrap"&gt;
      &lt;table class="shop_table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th class="product-name"&gt;Product&lt;/th&gt;
            &lt;th class="product-total"&gt;Total&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr class="cart_item"&gt;
            &lt;td class="product-name"&gt;
              Happy Ninja &lt;strong class="product-quantity"&gt;× 1&lt;/strong&gt; &lt;/td&gt;
            &lt;td class="product-total"&gt;
              &lt;span class="amount"&gt;£35.00&lt;/span&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="cart_item"&gt;
            &lt;td class="product-name"&gt;
              Happy Ninja &lt;strong class="product-quantity"&gt;× 5&lt;/strong&gt; &lt;/td&gt;
            &lt;td class="product-total"&gt;
              &lt;span class="amount"&gt;£90.00&lt;/span&gt; &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot&gt;
  
          &lt;tr class="cart-subtotal"&gt;
            &lt;th&gt;Cart Subtotal&lt;/th&gt;
            &lt;td&gt;&lt;span class="amount"&gt;£125.00&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
  
  
  
          &lt;tr class="shipping"&gt;
            &lt;th&gt;Shipping and Handling&lt;/th&gt;
            &lt;td&gt;
  
              Free Shipping &lt;input name="shipping_method[0]" data-index="0" id="shipping_method_0" value="free_shipping" class="shipping_method" type="hidden"&gt;
  
  
  
            &lt;/td&gt;
          &lt;/tr&gt;
  
  
  
  
  
  
  
          &lt;tr class="order-total"&gt;
            &lt;th&gt;Order Total&lt;/th&gt;
            &lt;td&gt;&lt;strong&gt;&lt;span class="amount"&gt;£125.00&lt;/span&gt;&lt;/strong&gt; &lt;/td&gt;
          &lt;/tr&gt;
  
  
        &lt;/tfoot&gt;
  
      &lt;/table&gt;
      &lt;!-- shop_table_wrap --&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/k1knak9k/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><strong>Can anyone see where this gap is coming from, and how to remove it?</strong></p>