如何刪除TBODY元素之間的額外邊框間距？

重要提示：此問題已失效。該錯誤在最新版本的Chrome中得到修復。如何刪除TBODY元素之間的額外邊框間距？

我使用border-spacing: 1px CSS規則讓我的TABLE中的所有單元格之間的間距爲1px。但是，我必須在我的表格中使用多個TBODY元素。我在THEAD,TBODY和TFOOT元素（Chrome）之間得到2px。

用1px替換這些2px差距的最簡單方法是什麼？

The gaps

精確的HTML和CSS代碼：http://jsfiddle.net/qQA3Z/

來源

2013-02-12 wrygiel

注：這是一個特定的Webkit內核的bug。（在Firefox中不存在，和往常一樣，IE甚至不會加載jsFiddle來測試它。）

不幸的是，沒有辦法正確修復此問題。這個話題已經有an open question了。此外，還有an open bug report since Chrome 8已經通過Chrome 20確認存在（我可以在Chrome 25中確認）。在這個問題上還有一個open Webkit bug thread，它仍然是「NEW」。

說實話，我甚至找不到解決方法。使用border-spacing，margin，甚至position似乎對此沒有影響。

來源

2013-02-12 23:25:31 Eric

此問題在今天似乎已在金絲雀中修復https://code.google.com/p/chromium/issues/detail?id=29502#c25 – 2013-09-15 14:22:05

剛剛在最新的Chrome瀏覽器，它似乎是固定的。（也標記爲正確答案。） – wrygiel 2014-02-11 16:32:07

這樣看來，還有的border-collapse之間的table水平和孩子thead，tbody，tfoot衝突。可能的解決方法：

http://jsfiddle.net/qQA3Z/3/

body { margin: 10px; } 
div {border: 1px solid #aaa; display:inline-block} 
table { 
    background: #fff; 
    border-collapse: collapse; 
} 
td { 
    font-family: Tahoma; 
    background: #ddd; 
    padding: 5px 8px; 
    border:1px solid #fff 
} 

<div> 
<table> 
    <thead> 
     <tr><td colspan='2'>Header</td></tr> 
     <tr><td>Column 1</td><td>Column 2</td></tr> 
    </thead> 
    <tbody> 
     <tr><td>Element</td><td>Element</td></tr> 
     <tr><td>Element</td><td>Element</td></tr> 
    </tbody> 
    <tfoot> 
     <tr><td colspan='2'>Footer</td></tr> 
    </tfoot> 
</table> 
</div>

來源

2013-02-12 23:25:56 greener

+1更巧妙的解決方法。 – Eric 2013-02-12 23:28:53

+1在Chrome，FF和IE上確認。謝謝！ – wrygiel 2013-02-12 23:41:21

所以解決方案是添加額外的標記？不用了，謝謝。 – crush 2013-04-11 21:10:35

這解決了這對我來說：

table { border-collapse: collapse!important;}

來源

2014-09-18 13:57:18 jamps3

什麼親自解決了這個問題對我來說是改變行高爲0

行高：0; border-spacing：0

來源

2014-10-16 13:03:41

如何刪除TBODY元素之間的額外邊框間距？

回答

相關問題