html - 表格边框显示不正确

Question

我目前正在尝试在表格中的每一行上设置底部边框，但是它们并没有完全触及我在表格上的外边框。 tr 和 table 标签之间似乎有一些奇怪的间距，但我不太清楚它是什么。

我已经尝试使用各种表格 CSS 属性(border-collapse、border-spacing)，但似乎仍然无法消除这种差距。

#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;
}

<div style="position: relative;" id="order_review">
  <div class="shop_table_wrap">
    <table class="shop_table">
      <thead>
        <tr>
          <th class="product-name">Product</th>
          <th class="product-total">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 1</strong> </td>
          <td class="product-total">
            <span class="amount">£35.00</span> </td>
        </tr>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 5</strong> </td>
          <td class="product-total">
            <span class="amount">£90.00</span> </td>
        </tr>
      </tbody>
      <tfoot>

        <tr class="cart-subtotal">
          <th>Cart Subtotal</th>
          <td><span class="amount">£125.00</span></td>
        </tr>




        <tr class="shipping">
          <th>Shipping and Handling</th>
          <td>

            Free Shipping <input name="shipping_method[0]" data-index="0" id="shipping_method_0" value="free_shipping" class="shipping_method" type="hidden">



          </td>
        </tr>







        <tr class="order-total">
          <th>Order Total</th>
          <td><strong><span class="amount">£125.00</span></strong> </td>
        </tr>


      </tfoot>

    </table>
    <!-- shop_table_wrap -->
  </div>
</div>

JSFiddle

谁能看出这个差距是从哪里来的，以及如何消除它？

Answer 1

对 CSS 进行以下更改:

• 从 table 中移除 border-collapse: collapse;
• 从 thead
中删除 border: 10px solid #fff;
• 将 border: 10px solid #fff; 添加到 thead 和 tfoot 单元格中
• 删除相关单元格上的left和right边框，以防止它们在中间被分割

    #order_review .shop_table {
        width: 100%;
        table-layout: fixed;
        /*Remove 
        border-collapse: collapse;*/
        border-spacing: 0px;    
    }
    #order_review .shop_table thead {
        background: #e9eff7;
        /*Remove 
        border: 10px solid #fff;*/
    }
    #order_review .shop_table thead th, .order-total th, .order-total td {
        text-align: left;
        padding: 16px 10px;
        /*Add */
        border: 10px solid #fff;
    }
    /*Add */
    #order_review .shop_table thead .product-name, .order-total th {
        border-right: 0;
    }
    /*Add */
    #order_review .shop_table thead .product-total, .order-total td {
        border-left: 0;
    }

#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;
  /*Remove 
        border-collapse: collapse;*/
  border-spacing: 0px;
}

#order_review .shop_table th {
  color: #2566AC;
}

#order_review .shop_table thead {
  background: #e9eff7;
  /*Remove 
            border: 10px solid #fff;*/
}

#order_review .shop_table thead th,
.order-total th,
.order-total td {
  text-align: left;
  padding: 16px 10px;
  /*Add */
  border: 10px solid #fff;
}


/*Add */

#order_review .shop_table thead .product-name,
.order-total th {
  border-right: 0;
}


/*Add */

#order_review .shop_table thead .product-total,
.order-total td {
  border-left: 0;
}

#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 td {
  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;
}

<div style="position: relative;" id="order_review">
  <div class="shop_table_wrap">
    <table class="shop_table">
      <thead>
        <tr>
          <th class="product-name">Product</th>
          <th class="product-total">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 1</strong> </td>
          <td class="product-total">
            <span class="amount">£35.00</span> </td>
        </tr>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 5</strong> </td>
          <td class="product-total">
            <span class="amount">£90.00</span> </td>
        </tr>
      </tbody>
      <tfoot>

        <tr class="cart-subtotal">
          <th>Cart Subtotal</th>
          <td><span class="amount">£125.00</span></td>
        </tr>




        <tr class="shipping">
          <th>Shipping and Handling</th>
          <td>

            Free Shipping <input name="shipping_method[0]" data-index="0" id="shipping_method_0" value="free_shipping" class="shipping_method" type="hidden">



          </td>
        </tr>







        <tr class="order-total">
          <th>Order Total</th>
          <td><strong><span class="amount">£125.00</span></strong> </td>
        </tr>


      </tfoot>

    </table>
    <!-- shop_table_wrap -->
  </div>
</div>

JS fiddle : http://jsfiddle.net/1mmw1ppu/