php中表格间距代码,css:border-spacing属性(表格边框间
距)的⽰例代码分享
我们知道表格加⼊边框默认情况下是如下图那样的:
table设置内边框
我们在上⼀节讲解了如何合并表格边框(消除表格边框间距)。但是在实际开发中,我们有可能要设置⼀下表格边框的间距。
在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
在浏览器预览效果如下:
分析:
"border-spacing:5px 10px"定义了单元格之间⽔平⽅向的间距为5px,垂直⽅向的间距为10px。
border-spacing属性跟上节课学到的border-collapse属性⼀样,只需要在table元素设置就可以⽣效,没必要在th、td这些元素中设置,造成代码冗余。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。