首页 >

css:border-spacing属性(表格边框间距)的示例代码分享

web前端|css教程css:border-spacing属性(表格边框间距)的示例代码分享
border-spacing,css,样式表
web前端-css教程
sup卡盟源码,vscode编写vue必装插件,ubuntu改变屏幕,修改tomcat共享链接,爬虫 encode报错,php底层开发,永州关键词seo优化公司lzw
A、border-spacing属性
汽车网站源码asp,vscode颜色编辑在哪,ubuntu 软件升级,tomcat svn插件,sqlite建表命名规则,电脑被爬虫了怎么办,php my,濮阳南乐seo价格,angularjs网站模板,手机网页框架源码,typecho 自定义模板lzw
我们知道表格加入边框默认情况下是如下图那样的:
校友录源码,vscode 画流程图插件,ubuntu 升级git,打开tomcat 80端口,爬虫 随机休眠,php页面乱码问题,seo模型挖词判断竞争度,e-auto x1汽车网网站系统lzw
css:border-spacing属性(表格边框间距)的示例代码分享

我们在上一节讲解了如何合并表格边框(消除表格边框间距)。但是在实际开发中,我们有可能要设置一下表格边框的间距。

在CSS中,我们使用border-spacing属性来定义表格边框间距。

语法:

border-spacing:像素值;

说明:

该属性指定单元格边界之间的距离。当只指定了1个像素值时,这个值将作用于横向和纵向上的间距;当指定了2个length值时,第1个作用于横向间距,第2个作用于纵向间距。

在CSS初学阶段,全部都是使用像素作单位,在CSS进阶中我们会深入讲解其他CSS单位。

举例:

     border-spacing属性            table,th,td{border:1px solid gray;}        table{border-spacing:5px 10px }        
表格标题
表头单元格1 表头单元格2
标准单元格1标准单元格2
标准单元格1标准单元格2
标准单元格1标准单元格2

在浏览器预览效果如下:

css:border-spacing属性(表格边框间距)的示例代码分享

分析:

“border-spacing:5px 10px”定义了单元格之间水平方向的间距为5px,垂直方向的间距为10px。

border-spacing属性跟上节课学到的border-collapse属性一样,只需要在table元素设置就可以生效,没必要在th、td这些元素中设置,造成代码冗余。


css:border-spacing属性(表格边框间距)的示例代码分享
  • CSS:border-spacing属性的使用与定义
  • CSS:border-spacing属性的使用与定义 | CSS:border-spacing属性的使用与定义 ...

    css:border-spacing属性(表格边框间距)的示例代码分享
  • CSS中border-spacing和cellspacing如何实现1px细边框的两种方法
  • CSS中border-spacing和cellspacing如何实现1px细边框的两种方法 | CSS中border-spacing和cellspacing如何实现1px细边框的两种方法 ...

    css:border-spacing属性(表格边框间距)的示例代码分享
  • css怎么设置内部边框 |深圳css3网站开发多少钱
  • css怎么设置内部边框 |深圳css3网站开发多少钱 | css怎么设置内部边框 |深圳css3网站开发多少钱 ...