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

Question

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

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

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

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

Answer 1

个人为我解决的问题是将 line-height 更改为 0

行高：0； 边框间距：0

Answer 2

这为我解决了：

table { border-collapse: collapse!important;}

Answer 3

在table 级别的border-collapse 和子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 4

注意：这是一个特定于 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 一起玩似乎对此没有影响。