8

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

我使用border-spacing: 1pxCSS 规则让我的所有单元格之间TABLE有一个1px间距。但是,我必须TBODY在表中使用多个元素。我2px介于THEAD,TBODYTFOOT元素之间(Chrome)。

用 替换这些2px差距的最简单方法是什么1px

缺口

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

4

4 回答 4

9

注意:这是一个特定于 Webkit 的错误。(在 Firefox 中不存在,并且像往常一样,IE 甚至不会加载 jsFiddle 来测试它。)

不幸的是,没有办法正确解决这个问题。关于这个话题已经有一个悬而未决的问题。此外,自 Chrome 8 以来有一个未解决的错误报告已通过 Chrome 20 确认存在(我可以在 Chrome 25 中确认)。关于这件事还有一个开放的 Webkit bug thread,它仍然是“ NEW ”。

老实说,我什至找不到解决方法。玩border-spacing, margin,甚至position似乎对此没有影响。

于 2013-02-12T23:25:31.907 回答
8

看起来border-collapseattable级别和孩子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-12T23:25:56.697 回答
7

这为我解决了这个问题:

table { border-collapse: collapse!important;}
于 2014-09-18T13:57:18.580 回答
4

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

行高:0;边框间距:0

于 2014-10-16T13:03:41.700 回答