因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就正对次问题,百度了一下解决方案。
table 表格的边框宽度不为0的样式
HTML代码html>
Document
table,tabletrtd{
border:1pxsolid#ccc;
}
tabletrtd{
padding:5px10px;
}
代码运行结果:
通过下图可得知,table 的表格为双线的形式,但我们可以通过 css 中的 border-collapse 属性,将双线样式的边框合并为单线形式的边框。
css border-collapse属性
border-collapse:属性,为表格设置合并边框模型。
其属性值如下:
separate:默认值。边框会被分开。
collapse:将边框会合并为一个单线的边框
inherit:继承父元素的 border-collapse 属性的值,早期IE浏览器不支持此值。
实现 table 的单线边框的办法
为 table 表格的样式,为入 border-collapse 属性即可
修改以上代码中的,样式如下
table{
border-collapse:collapse;
}
table,tabletrtd{
border:1pxsolid#ccc;
}
tabletrtd{
padding:5px10px;
}
运行结果:
如果觉得《css单线边框_HTML table表格边框设置为单线的方法》对你有帮助,请点赞、收藏,并留下你的观点哦!