CSS设置表格tr行间距的方法

border-collapse:separate;
border-spacing: 0px 10px;

参考链接:https://blog.csdn.net/caicai1171523597/article/details/88324819

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。
它的属性值如下：

border-collapse属性加上border-spacing属性就可以设置tr行间距

案例一:证明border-collapse的默认值是separate

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div_box{width: 300px;height: 80px;margin: 0 auto;margin-top: 100px;}.div_box table{border: 1px solid rebeccapurple;}.div_box table tr td{border: 1px solid grey;}</style>
</head><body><div class="div_box"><table><tr><td>单元格1-1</td><td>单元格1-2</td></tr><tr><td>单元格2-1</td><td>单元格2-2</td></tr></table></div>
</body></html>

效果图

案例二

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div_box {width: 300px;height: 80px;margin: 0 auto;margin-top: 100px;}.div_box table {border: 1px solid rebeccapurple;/* 首先把单元格与单元格的间距设置为0 *//* border-collapse: collapse;  或者 border-spacing: 0px; *//* border-spacing第一个值 是水平 第二个值 设置垂直 */border-collapse:separate;border-spacing: 0px 10px;}.div_box table tr td {border: 1px solid grey;}</style>
</head><body><div class="div_box"><table><tr><td>单元格1-1</td><td>单元格1-2</td></tr><tr><td>单元格2-1</td><td>单元格2-2</td></tr></table></div>
</body></html>

效果图

CSS设置表格tr行间距的方法相关推荐

pdfptable 设置行间距_CSS设置表格tr行间距的方法
border-collapse 属性设置表格的边框是否被合并为一个单一的边框. 它的属性值如下: 值描述 separate 默认值.边框会被分开.不会忽略 border-spacing 和 empt ...
用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式第6章 CSS设置表格与表单样式学习目标什么是表格模型对数据表格应用样式. 创建简单和复杂的表单布局对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
python word 表格框线_python设置表格边框的具体方法
安装 xlwings 直接安装用 pip install xlwings,用 anaconda 的,已经内置了,见下图. 导入 xlwings import xlwings as xw 打开 Exce ...
python 打印表格边框_python设置表格边框的具体方法
安装 xlwings 直接安装用 pip install xlwings,用 anaconda 的,已经内置了,见下图. 导入 xlwings import xlwings as xw 打开 Exce ...
python不显示边框_python设置表格边框的具体方法
安装 xlwings 直接安装用 pip install xlwings,用 anaconda 的,已经内置了,见下图. 导入 xlwings import xlwings as xw 打开 Exce ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
css 设置表格右边有图片_20个web前端HTML5初学者实用CSS代码技巧
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边 ...
html边框定义css设置,表格边框的css语法
表格边框的css语法更新时间:2006年09月21日 00:00:00 作者: 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下 ...

CSS设置表格tr行间距的方法

CSS设置表格tr行间距的方法相关推荐

最新文章

热门文章