如何设置CSS表格边框间的距离及border |
您所在的位置:网站首页 › 在css中怎么设置边框与字的距离 › 如何设置CSS表格边框间的距离及border |
如何设置CSS表格边框间的距离及border-spacing属性的使用方法
发布时间:2020-07-09 18:01:10
来源:亿速云
阅读:1364
作者:Leah
栏目:web开发
这期内容当中小编将会给大家带来有关如何设置CSS表格边框间的距离及border-spacing属性的使用方法,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 CSS border-spacing属性 border-spacing属性会在表格边框“分离”时,设置行和单元格的边框在横向和纵向上的间距。 它可以有1~2个length值: ● 如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。 ● 如果只提供一个length值时,这个值将作用于横向和纵向上的间距。 说明:该border-spacing属性的作用等同于HTML标签属性cellspacing。 注:只有当表格边框各自独立(即border-collapse属性设置separate时)此属性才起作用。 CSS border-spacing属性的使用示例 下面通过简单代码示例来看看border-spacing属性是如何设置表格边框间的距离: 示例1:在设置border-collapse: collapse;时: table, td, th { border: 1px solid black; } td,th{ padding: 5px 20px; } #table1 { border-collapse: collapse; border-spacing: 15px; } border-spacing: 15px:使用“border-collapse:collapse”时,border-spacing属性无效: 姓名 年龄 Peter 20 Lois 20效果图: 示例2: table, td, th { border: 1px solid black; } td,th{ padding: 5px 20px; } #table2 { border-collapse: separate; border-spacing: 15px; } #table3 { border-collapse: separate; border-spacing: 15px 30px; } border-spacing: 15px:使用“border collapse:separate”时,border spacing属性可用于设置单元格之间的间距: 姓名 年龄 Peter 20 Lois 20 border-spacing: 15px 30px:使用两个length值(第一个值设置水平间距,第二个值设置垂直间距): 姓名 年龄 Peter 20 Lois 20效果图: 代码说明: 边框独立时(border-collapse属性设置separate时),border - spacing生效;相邻边被合并时(border-collapse属性设置collapse时),border - spacing属性无效。 上述就是小编为大家分享的如何设置CSS表格边框间的距离及border-spacing属性的使用方法了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。 推荐阅读:怎么设置CSS的表格边框 免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 css border-spacing属性 表格边框距离 上一篇新闻:spring 报错:.NoSuchBeanDefinitionException 下一篇新闻:SQL Server 2016的安装 猜你喜欢 Intellij IDEA调试功能使用介绍 PHP实现表单和用户输入功能 PHP中For循环的用 dubbo的超时机制原理 PhpMyAdmin不能导出数据的问题怎么解决 wmiprvse是什么进程 如何使用perl递归找出菜单路径 YAML是什么语言 JavaScript中如何定义函数 C语言怎么对结构体进行赋值 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |