html - 只有一行比应有的大的表格

Question

我正在创建一个 html 页面，我正在使用以下代码创建一个表:

<table style="border-spacing: 85px; position: relative; bottom: 0px" align="center" >
        <tr>
            <td>one</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
 </table>

如您所见，只有一个 TR，但当我在任何浏览器上打开代码时，表格高度为 192px，tbody 的高度为 192px，但 TR 的高度仅为 22px。如果我只需要 22px 的 TR 高度，为什么浏览器要创建那么大的表格？

感谢您的帮助。

Answer 1

这是因为您在表格样式中指定的“border-spacing: 85px”。行上方 85 像素 + 行下方 85 像素 + 行本身的 22 像素 = 192 像素。

如果您只想要行的高度，请删除该样式规范:

<table style="position: relative; bottom: 0px" align="center" >
        <tr>
            <td>one</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
</table>

编辑:(解决评论中的提问者问题)

为了分别指定垂直和水平间距，请确保使用 2 个参数给“border-spacing”。第一个参数指定水平间距，第二个参数指定垂直间距。示例:

<table style="border-spacing: 85px 3px; position: relative; bottom: 0px" align="center" >
        <tr>
            <td>one</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
</table>