表格中的border-spacing与border

border-spacing

1. 可用，需设置在table标签上或者display为table、inline-table的元素。

　　必须有border-collapse属性时，才起作用。如果单元格不分离，怎么来的单元格之间的距离啊。

　　border-spacing：10px 30px;

　　表示单元格水平间隔10px，竖直间隔30px
　　

table{
border-collapse: collapse;
/*设置为collapse后，border-spacing就失效了*/
/*看来这个属性要在table上设置*/
border-spacing: 130px 15px;
}

表格里的border

这里有两个border，一个是可以在table标签上设置，一个是可以在td上设置。

table上的border指的最外圈大框的border，td的border指的是最小的单元格的border。

具体表现如下：

这里我设置了padding和border-spacing。

当我设置border-collapse 为collapse的时候，神奇的一幕发生了。

padding和border-spacing 都不起作用了。border-spacing可以理解，但padding为何就没作用了呢？

我的理解是关键还是在collapse，设置这个属性后，所有的border都连接在了一起。包括外围border和cell的border，不再分割单元格。

转载于:https://www.cnblogs.com/nostic/p/5743248.html

表格中的border-spacing与border相关推荐

[css] css中的border:none和border:0px有什么区别？
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
elementUi中的el-select/el-input去掉border边框
在开发过程中遇到需要去掉 el-input的边框, 这是element ui 官方文档的样式而我们的需求是不可行做法 <div class="inputDemo"> ...
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法在开发中发现如果同时给了圆角和虚线虚线属性会有问题分别设置圆角四个角 ...
使用jquery合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
html插入不规则表格,如何构建HTML表格中的不规则形状？
我试图复制下面的表格中HTML: 但也有一些额外的,形状不规则行,我想知道如果有一个简单的方法使用表来编写他们,尤其是游泳学校上周五,以及星期一至星期四晚上的租金.如何构建HTML表格中的不规则形状? ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
（转）用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
Vue表格中，对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
jQuery无任何标示获取td在表格中的行数和列数
当td没有任何标示时,在jQuery中实现获取其在表格中的行和列: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

表格中的border-spacing与border

表格中的border-spacing与border相关推荐

最新文章

热门文章