您现在的位置是：网站首页> 编程资料编程资料

给表格设置不重叠的边框(单线边框)的2种方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-07 1000人已围观

简介当我们遇到给表格table设置边框的情况，但效果总是达不到预期；例如因重复设置而加粗，破坏了整体效果，下面与大家分享下两种设置单线边框的css样式，感兴趣的朋友可以参考下，希望对大家有所帮助

大多数朋友都会遇到给表格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;
}

效果：