重要提示:这个问题不再有效。此错误已在最新版本的 Chrome 中修复。
我使用border-spacing: 1px
CSS 规则让我的所有单元格之间TABLE
有一个1px
间距。但是,我必须TBODY
在表中使用多个元素。我2px
介于THEAD
,TBODY
和TFOOT
元素之间(Chrome)。
用 替换这些2px
差距的最简单方法是什么1px
?
准确的 HTML 和 CSS 代码:http: //jsfiddle.net/qQA3Z/
重要提示:这个问题不再有效。此错误已在最新版本的 Chrome 中修复。
我使用border-spacing: 1px
CSS 规则让我的所有单元格之间TABLE
有一个1px
间距。但是,我必须TBODY
在表中使用多个元素。我2px
介于THEAD
,TBODY
和TFOOT
元素之间(Chrome)。
用 替换这些2px
差距的最简单方法是什么1px
?
准确的 HTML 和 CSS 代码:http: //jsfiddle.net/qQA3Z/
注意:这是一个特定于 Webkit 的错误。(在 Firefox 中不存在,并且像往常一样,IE 甚至不会加载 jsFiddle 来测试它。)
不幸的是,没有办法正确解决这个问题。关于这个话题已经有一个悬而未决的问题。此外,自 Chrome 8 以来有一个未解决的错误报告已通过 Chrome 20 确认存在(我可以在 Chrome 25 中确认)。关于这件事还有一个开放的 Webkit bug thread,它仍然是“ NEW ”。
老实说,我什至找不到解决方法。玩border-spacing
, margin
,甚至position
似乎对此没有影响。
看起来border-collapse
attable
级别和孩子thead
, tbody
,之间存在冲突tfoot
。一种可能的解决方法:
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>
这为我解决了这个问题:
table { border-collapse: collapse!important;}
个人为我解决的问题是将 line-height 更改为 0
行高:0;边框间距:0