border-spacing属性(CSS设置)

发布时间：2021-07-11 18:46 所属分类：时与间设计浏览次数：

　　border-spacing属性(CSS设置)

　　这期内容当中小编将会给大家带来有关怎么设置CSS表格边框间的间隔及border-spacing特点的运用方法，文章内容丰富且以专业的视点为大家剖析和叙述，阅读完这篇文章期望大家能够有所收成。

　　CSSborder-spacing特点

　　border-spacing特点会在表格边框“分离”时，设置行和单元格的边框在横向和纵向上的间隔。

　　它能够有1~2个length值：

　　●假如提供悉数两个length值时，第一个作用于横向间隔，第二个作用于纵向间隔。

　　●假如只提供一个length值时，这个值将作用于横向和纵向上的间隔。

　　说明：该border-spacing特点的作用等同于HTML标签特点cellspacing。

　　注：只有当表格边框各自独立（即border-collapse特点设置separate时）此特点才起作用。

　　CSSborder-spacing特点的运用示例

　　下面经过简略代码示例来看看border-spacing特点是怎么设置表格边框间的间隔：

　　示例1：在设置border-collapse:collapse;时：

　　html><html><head><metacharset="UTF-8"><style>table,td,th{border:1pxsolidblack;

　　}td,th{padding:5px20px;

　　}#table1{border-collapse:collapse;border-spacing:15px;

　　}style>head><body><h3>border-spacing:15px:h3><p>运用“border-collapse:collapse”时，border-spacing特点无效：p><tableid="table1"><tr><th>名字th><th>年纪th>tr><tr><td>Petertd><td>20td>tr><tr><td>Loistd><td>20td>tr>table>body>html>

　　效果图：

　　怎么设置CSS表格边框间的间隔及border-spacing特点的运用方法

　　示例2：

　　html><html><head><metacharset="UTF-8"><style>table,td,th{border:1pxsolidblack;

　　}td,th{padding:5px20px;

　　}#table2{border-collapse:separate;border-spacing:15px;

　　}#table3{border-collapse:separate;border-spacing:15px30px;

　　}style>head><body><h3>border-spacing:15px:h3><p>运用“bordercollapse:separate”时，borderspacing特点可用于设置单元格之间的间隔：p><tableid="table2"><tr><th>名字th><th>年纪th>tr><tr><td>Petertd><td>20td>tr><tr><td>Loistd><td>20td>tr>table><h3>border-spacing:15px30px:h3><p>运用两个length值（第一个值设置水平间隔，第二个值设置笔直间隔）：p><tableid="table3"><tr><th>名字th><th>年纪th>tr><tr><td>Petertd><td>20td>tr><tr><td>Loistd><td>20td>tr>table>body>html>

　　效果图：

　　怎么设置CSS表格边框间的间隔及border-spacing特点的运用方法

　　代码说明：

　　边框独立时（border-collapse特点设置separate时），border-spacing收效；相邻边被兼并时（border-collapse特点设置collapse时），border-spacing特点无效。

　　上述便是小编为大家分享的怎么设置CSS表格边框间的间隔及border-spacing特点的运用方法了，假如刚好有相似的疑惑，无妨参照上述剖析进行理解。假如想知道更多相关常识，欢迎关注亿速云行业资讯频道。

作品标签： CSS 属性

上一篇：国旗设计者是谁(国旗设计的含义)

下一篇：美食图片(美食图片大全家常菜)

返回上一页返回列表

优秀作品：

评论：border-spacing属性(CSS设置) [查看原文]

作品分类：时与间设计

评论列表（共170人参与）参与讨论或分享设计作品获得视觉癖积分奖励

片 1、这注册会员

2021-07-11 16:46:7

L" src="/uploads/allimg/210706/1-210F61T205.jpg" /> 标签显现斜体文本作用。。快乐回家VIVO 0

甘情愿的注册会员

2021-07-11 18:0:11

xt-align: center;"> border-spacing属性(CSS设yle="height: 287px; width: 400。。。

规范本规注册会员

2021-07-11 4:24:30

@甘情愿的：border-spacing属性好便足矣! 5.中秋节，我以心为弦，情为指，怀念为谱，祝愿为歌，为教师您奏响圆圆曲：月儿圆圆饼圆圆，桂花圆圆香圆圆，愿教师您日~~~

扬单的时分不游客

2021-07-11 1:2:20

游客56217：border-spacing属 O2O日子服务推行打得火热，各种供给日常日子中的吃、住、行、游的APP雨后春笋般冒出。作为用户的咱们，是否很好奇现在上线的日子服务类O2O渠道APP有哪些?它们有哪些功用?它们之间又有什么不/span> 网络信息安全的重要性：当今社会信息安全越来越受到重视是因为它己经成为影响国家

面混乱不注册会员

2021-07-11 18:7:24

单元格的边框在横向和纵向上的间隔。 1、崇尚时尚的现代精约风格对于不少青年人来说，工作的压力、繁琐的应酬让他们需要一个更为简略的环境给自己的身心一个放松的空间。落拓不羁、没有捆绑，让自由不