HTML 表格 - 行之间的空间答案

【问题标题】：HTML table - space between rowsHTML 表格 - 行之间的空间
【发布时间】：2019-02-03 00:44:19
【问题描述】：

我发现 Firefox 和 Chrome 对同一个 HTML 表的行为有所不同。

Firefox：行间距均等。

Chrome：行与行之间的空间不均等。

谁能告诉我这是怎么回事？

<html>
    <body>
        <table border="1" width="100%">
            <tr>
                <td rowspan="3">AAA</td>
                <td>BBB</td>
                <td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
            </tr>
            <tr>
                <td>BBB</td>
            </tr>
            <tr>
                <td>BBB</td>
            </tr>
        </table>
    </body>
</html>

【问题讨论】：

如果您查看链接小提琴中突出显示的语法，您会发现您的 HTML 结构有问题。这可能与问题有关，也可能无关，但调试正确 HTML 更容易、更可靠。
如果您将   标签更改为  ，它会修复小提琴中的错误，但不会均衡 Chrome 中的间距。

标签： html html-table

【解决方案1】：

这是 Chrome/Webkit 浏览器的一个已知渲染问题。

一位用户在这里提供了解决方案：Table cells bad rendering with Google Chrome/Webkit

【讨论】：

【解决方案2】：

您需要使用  而不是  来关闭标签。

在兼容的 XHTML 中，所有标签都需要正确关闭。在这种情况下，不是用 关闭标签，而是使用尾随的/ 来完成。

<br></br>

等价于

<br/>

你会对图像元素做同样的事情：

<img src="..."/>

【讨论】：

它修复了小提琴中的错误，但不均衡 Chrome 中的间距。

【解决方案3】：

有一个类似的问题，我在 Chrome 中的行之间有 1px 的空间，但在其他浏览器中没有。当我在 CSS 中添加以下内容时，它就解决了。

td{
   padding: 0px 0px;
   position:relative;
}

关键点是将 td 设置为 "position:relative"。出于某种原因，它解决了这个问题。在这种情况下，也许同样可以提供帮助。

【讨论】：

【解决方案4】：

如果关闭第三个<td...会怎样

<td rowspan="3"CCC
<td rowspan="3">CCC

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
我无法发表评论。我需要 50 声望 ;)
抱歉，这是规则。见here。