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。如果我只需要TR的高度为22px，为什么浏览器会创建那个大表？

感谢您的帮助。

Answer 1

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

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

<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>

表只有一行比它应该大

1 个答案: