CSS 设置table中tr的行间距

最新推荐文章于 2022-12-02 14:44:44 发布

原创最新推荐文章于 2022-12-02 14:44:44 发布 · 5.9k 阅读

1 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#table #border-collapse #border-spacing #separate

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

CSS

26 篇文章

订阅专栏

本文介绍CSS中border-collapse属性的作用及用法，通过该属性可以设置表格边框是否合并，并结合border-spacing属性实现表格行间的间距设置。

CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

border-collapse属性加上border-spacing属性就可以设置tr行间距

<table style="border-collapse:separate; border-spacing:0px 10px;">
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
    </tr>
</table>