给表格设置不重叠的边框(单线边框)的2种方法

纯洁美丽。它化做雪花,用自己洁白的生躯覆盖在大地上。此时,一切都是银装素裹,一副冰清玉洁的模样。光秃秃的树枝上缀满了朵朵洁白的 "梨花 ",风一吹,花儿纷纷飘落,好似一只只银白色的蝴蝶在空中偏偏起舞。 "忽如一夜春风来,千树万树梨花开 ",这句诗不正是赞美冬天的吗?
大多数朋友都会遇到给表格table设置边框的情况,但效果总是达不到预期,比如某几根线会因重复设置而加粗,破坏了整体效果。下面我给大家介绍两种设置单线边框的css样式:
第一种:
复制代码
代码如下:

table{
border-collapse:collapse;
}
table tr{
border:1px solid red;
}

第二种:
复制代码
代码如下:

table tr td{
border-top:1px solid red;
}
table{
border:1px solid red;
border-top-width:0px;
}

效果:

本文给表格设置不重叠的边框(单线边框)的2种方法到此结束。虽然过去不能改变,未来能够。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例