网站建设资讯

NEWS

网站建设资讯

css如何去掉表格重复的边框

这篇文章主要为大家展示了“css如何去掉表格重复的边框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何去掉表格重复的边框”这篇文章吧。

专注于为中小企业提供成都网站设计、成都做网站、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业河北免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

在css中,可以使用border-collapse属性来去掉表格中重复的边框,该属性可以设置表格边框是折叠为单一边框还是分开的,只需要将值设置为collapse即可把重叠的边框合并在一起,成为一个边框,实现单线边框的效果。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

table表格设置边框后的重叠问题

table{
 border-spacing: 0;
 border-collapse: collapse;
}
table td {          
 border: 1px solid #000;
 padding: 20px 30px;
}

在table表格中当我们添加了边框,又把每个单元格的边距去除后,表单就会出现边框重叠的问题,使得边框线变粗,这时我们就可以设置border-collapse: collapse来设置边框,它把重叠的边框合并在一起,成为一个边框,实现单线边框的效果。

效果图:

css如何去掉表格重复的边框

说明:

border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。

属性值:

  • separate    默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

  • collapse    如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

以上是“css如何去掉表格重复的边框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:css如何去掉表格重复的边框
当前路径:http://njwzjz.com/article/gesiop.html