表格边框显示不正确

wickywills 发表于 Dev

邪恶意志

我目前正在尝试在表格的每一行上获得底部边框，但是它们并没有完全触及我在表格上的外部边框。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

谁能看到这个差距的来历以及如何消除它？

隐藏的爱好

对CSS进行以下更改：

border-collapse: collapse;从中删除table
border: 10px solid #fff;从中删除thead
添加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>