html表格边框设置单线,border-collapse把table边框的样式设置成单线

table 默认的情况，如果给单元格，添加边框的时候。每个边框都会有自己的边框。这样看上去就出现了，类似的双边框情况。看上去一点也不美观，还是把边框设置成单线的时候，比较美观。table中有个border-collapse属性，就是用来合并边框的。防止出现“双边框的情况。

collapse的本意就有折叠的含义，首先给出一个示例的效果。

没有把边框设置成单线的效果

border-collapse 没有合并单边框的图示

把边框设置成单线的效果

border-collapse 合并单边框

使用 collapse 对表格的边框合并成单线的示例代码

css 文件

table{

border-collapse: collapse;

}

table td, table th{

border: 1px solid #c5c5c5;

color: white;

}

table thead th {

background-color: #f4615c;

}

table tr th, table tr td{

padding: 5px 12px

}

table tr:nth-child(odd){

background: #01cf97;

}

table tr:nth-child(even){

background: #a2a9b6;

}

html 文件

Simple table with header

First name	Last name
John	Doe
Jane	Doe

Table with thead, tfoot, and tbody

Header content 1Header content 2

Footer content 1Footer content 2Body content 1Body content 2

如果想取消边框，可以把示例中的 border 设置成0 。同时边框缝隙也会被消失。

html表格边框设置单线,border-collapse把table边框的样式设置成单线相关推荐

POI处理PPT的表格table，XSLFTable样式设置
POI版本3.14 ppt中插入表格(table),是可以设置表格的样式的:抬头行有背景颜色,抬头行文字默认成白色,数据行分奇数偶数行有间隔背景色,这个样式是附加在表格元素上的,而不是加在行或者格子上 ...
html table边框细线,HTML小技巧将table边框改为细线
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...
css 设置其它标签,有没有办法将CSS样式设置为特定输入类型的标签？
我为特定表单的标签设置了以下样式: #incidentForm label { font-weight:bold; width:40%; vertical-align:top; } 这正是我想要的整页 ...
cad单线变双线lisp_cad里面怎么把双线转成单线
2020-05-30阅读(70) 本文主要为您介绍台式电脑时间慢了怎么办,内容包括电脑时间变慢,台式电脑用时间长,反应很慢怎么办,台式电脑的运行速度慢怎么办.这不是主板电池的问题,如果主板电池没最的话 ...
web前端学习（十八）——CSS3表格属性（table）的相关设置
1.CSS表格使用 CSS 可以使 HTML 表格更美观.指定CSS表格边框,使用border属性. 缩写边框属性设置在一个声明中所有的边框属性. 可以设置的属性分别(按顺序):border-wid ...
Pandas 表格样式设置指南，看这一篇就够了！
源自/Python数据之道最近这些年,Python在数据分析以及人工智能领域是越来越火. 这离不开pandas.numpy.sklearn.TensorFlow.PyTorch等数据科学包,尤其是 ...
【Python】Pandas 表格样式设置指南，看这一篇就够了！
Pandas 表格样式设置指南来源:Python数据之道 (ID:PyDataLab) 作者:阳哥最近这些年,Python在数据分析以及人工智能领域是越来越火. 这离不开pandas.numpy. ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
easypoi导出excel不设置样式_POI Excel导出样式设置
HSSFSheet sheet = workbook.createSheet("sheetName"); //创建sheet sheet.setVerticallyCenter(t ...
微信小程序official-account组件的使用及样式设置
大家下午好,作为一只写了好几个月小程序的猿,微信关注了'微信公众平台'的公众号是必然的,所以头天晚上就收到了这厮推送的消息,说是扫码打开小程序新增公众号关注组件.讲真的,我真的没打开看,困成狗的我心想 ...

html表格边框设置单线,border-collapse把table边框的样式设置成单线

html表格边框设置单线,border-collapse把table边框的样式设置成单线相关推荐

最新文章

热门文章