Chrome 和 Safari 中的双边框间距

Posted 2023-03-05

【中文标题】Chrome 和 Safari 中的双边框间距

【英文标题】：Double border-spacing with thead in Chrome and Safari

【发布时间】：2011-04-22 23:26:26

【问题描述】：

我有一个使用thead 和tbody 的table。 table 设置了 border-spacing，在 Chrome 和 Safari 中，标题行和其余部分之间的空间加倍。

去年年底它被报道为issue for Chrome，但这是我能找到的唯一参考。

有其他人有过这种情况，或者知道如何解决吗？

<table style="border-spacing: 0 5px">
<thead>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</tbody>

它在 Firefox 中按预期显示（所有行等距），不确定 IE。

【问题讨论】：

关闭内的 这似乎确实是 Webkit 中的一个错误。是否需要包含thead 和tbody 标签？ @dark_charlie - 通常说指定 thead 和 tbody 要好得多 - 如果开发人员稍后必须返回代码，则与指定 @987654330 相比，它的标记更少且更有意义@ 每时每刻。此外，虽然不使用它们可以解决问题，但 仍然是 Google 需要解决的问题，即使它不是一个大问题。 @ClarkeyBoy：谷歌/苹果肯定需要修复它。但在他们这样做之前，我们必须解决它，删除 thead 和 tbody 标签就是其中之一。 你能把这个问题的实际代码示例放到网上吗，例如在 jsfiddle.net 上？我似乎无法让那个错误出现。

【参考方案1】：

这不完全是“THE”解决方案，但您可能想在这里查看适用于我的具体案例的解决方法：

How to remove extra border spacing between TBODY elements?

【参考方案2】：

thead th 位置：相对； top: 5px; 就可以了