表格边框未正确显示

Question

我目前正试图在桌子的每一行上获得底部边框，但是它们并没有完全触及桌子上的外边框。 tr和table标签之间似乎有一些奇怪的间距，但我无法弄清楚它是什么。我尝试过使用各种表格CSS属性（边框折叠，边框间距），但仍然无法消除这种差距。

任何人都可以看到这个差距来自哪里，以及如何删除它？

JSFiddle

Answer 1

对CSS进行以下更改：

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

JS小提琴： http://jsfiddle.net/1mmw1ppu/

总结：

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

Answer 2

问题在于您拥有空白边框：

border: 10px solid #fff;

如果删除它，边框将按照您的意图。

Answer 3

添加10px空白的两个关键CSS规则如下：

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


#order_review .shop_table tfoot tr:last-child {
    background: #feece2;
    border: 10px solid #fff;
}

如果将10px更改为0，那将消除空白。

请参阅演示：http://jsfiddle.net/audetwebdesign/rmtevz8w/

Answer 4

从border-collapse类删除.shop_table属性，它将被修复。

Answer 5

删除表格的cellspacing。小差距问题得到解决。

前：

<table cellpadding="0" cellspacing="0" >
<tr>
<td></td>
</tr>
<table>

Answer 6

移除border-collapse并为td而不是tr

提供边框

Css更改：

#order_review .shop_table tr.cart_item td {/*td added*/
        border-bottom: 1px solid #eaeaea;
    }

DEMO