900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html表格边框设置单线 border-collapse把table边框的样式设置成单线

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

时间:2022-06-04 02:31:06

相关推荐

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

Table with thead, tfoot, and tbody

Header content 1Header content 2

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。