CSS设置表格tr行间距的方法

最新推荐文章于 2024-05-08 14:18:25 发布

caicai1171523597

最新推荐文章于 2024-05-08 14:18:25 发布

阅读量1.5w

点赞数 7

分类专栏： web前端

本文链接：https://blog.csdn.net/caicai1171523597/article/details/88324819

版权

web前端专栏收录该内容

27 篇文章 5 订阅

订阅专栏

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

它的属性值如下：

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

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

table{
            border-collapse: separate;
            border-spacing: 5px 10px;
        }

效果图如下：

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            border-collapse: separate;
            border-spacing: 5px 10px;
        }
        table tr td{
            background-color: #f00
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>class</td>
                <td>1</td>
            </tr>
            <tr>
                <td>class</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流

caicai1171523597

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS设置表格tr行间距的方法

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它的属性值如下：值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cel...
复制链接

扫一扫

专栏目录