php中表格间距代码,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

在浏览器预览效果如下：

分析：

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

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

php中表格间距代码,css：border-spacing属性（表格边框间距）的示例代码分享相关推荐

html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
html做一页关于时间轴的网站,前端css实现最基本的时间轴的示例代码
本文介绍了前端css实现最基本的时间轴的示例代码,分享给大家,具体如下: 原型: 代码: 状态详情 #timeleft div { height: 65px; color: #333333; } #t ...
html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...
html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
html制作收货地址页面,css 收货地址平行四边形的线条样式示例代码
代码如下所示: // 收货地址的平行四边形的线条样式 //样式 .top{ background-color: #fff; position: relative; } .top:before{ pos ...
猜猜乐游戏php源码,C/C++百行代码实现热门游戏消消乐功能的示例代码
游戏设计首先我们需要使用第三方框架,这里我使用的是sfml,不会使用sfml在我的上几篇文章当中-扫雷(上)有详细的开发环境搭建介绍首先准备图片资源一张背景图片,一张宝石图片窗口初始化加载图片 ...
php消消乐代码,C/C++百行代码实现热门游戏消消乐功能的示例代码
游戏设计首先我们需要使用第三方框架,这里我使用的是sfml,不会使用sfml在我的上几篇文章当中-扫雷(上)有详细的开发环境搭建介绍首先准备图片资源一张背景图片,一张宝石图片窗口初始化加载图片 ...

php中表格间距代码,css：border-spacing属性（表格边框间距）的示例代码分享

php中表格间距代码,css：border-spacing属性（表格边框间距）的示例代码分享相关推荐

最新文章

热门文章