table 表格边框合并为单一的边框的方法

#table 表格边框合并为单一的边框的方法| 来源: 网络整理| 查看: 265

table 表格边框合并为单一的边框的方法 2020-05-20墨初前端设计3742 - N +

在 html table 表格元素的默认设置中，如果为每个表格定义它的边框，整体看起来就感觉非常的凌乱，所以这篇博文就说一说，如果将 table 表格的单元格边框合成一条单线。

table 表格边框默认的样式

例代码：

Document table{ width: 300px; height: 120px; border: 1px solid #ccc; text-align: center; } td{ border:1px solid #ccc; } 表格表格表格表格表格表格表格表格表格

运行后，如下面所示：

表格边框合并成一条线

CSS border-collapse 属性，合并 table 表格边框

css 中的 border-collapse 属性可以将表格的边框合并为单一的边框。

其值如下：

collapse：将边框合并为单一的边框

separate：默认值，边框被分开，不会合并

inherit：继承父元素的 border-collapse 属性值。

注意：如果使用 collapse 值时，推荐设置 border-spacing 属性的值为 0。

例：table 表格的边框合并成单一的直线

修改上面的CSS代码如下：

table{ width: 300px; height: 120px; border: 1px solid #ccc; text-align: center; border-spacing: 0; border-collapse: collapse; } /*其它代码，参考上面的示例代码*/

运行后显示效果如下：

表格边框合并成一条线

标签：CSSHTMLweb前端HTML教程网页设计

本文来源：飞鸟慕鱼博客

本文地址：https://www.feiniaomy.com/post/588.html

站长有话：不要再私聊我了，本站用的阿里云ESC

【本文地址】

公司简介

联系我们