如何删除TBODY元素之间的额外边框间距？

Question

重要提示：此问题不再有效。此错误已在最近版本的Chrome中修复。

我使用border-spacing: 1px CSS规则让我的TABLE中的所有单元格之间的间距为1px。但是，我必须在表格中使用多个TBODY元素。我在2px，THEAD和TBODY元素（Chrome）之间得到TFOOT。

用2px替换这些1px间隙的最简单方法是什么？

精确的HTML和CSS代码：http://jsfiddle.net/qQA3Z/

Answer 1

注意：这是特定于Webkit的错误。 （不存在于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玩似乎不会对此产生影响。

Answer 2

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>

Answer 3

这解决了我：

table { border-collapse: collapse!important;}

Answer 4

亲自为我解决的问题是将行高改为0

行高：0; border-spacing：0