网站地图    收藏   

主页 > 专题教程 > css >

border-collapse

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] border-collapse属性用于定义表格边框的样式是分开的还是合并的。在分开模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。...

border-collapse属性用于定义表格边框的样式是分开的还是合并的。在分开模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

在CSS中,表格的单元格有两种模式:分隔模式和合并模式。

分隔(separated)模式是HTML表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性来确定的。

在合并(collapsed )模式下,表格相邻单元格共享边框。

下面的图片展示了这两种单元格边框模式:

表格边框样式

在collapsed模式中,border-style取值insetgroove时效果相同,取值outset ridge时效果相同。

官方语法
border-collapse: collapse | separate | inherit                             
                            

参数:

  • collapse:用于使用分隔的边框来绘制表格,默认值。
  • separate:用于使用合并的边框来绘制表格。
  • inherit:从父元素中继承边框样式。

border-collapse属性的默认值为:collapse

示例代码
border-collapse: collapse;
border-collapse: separate;

border-collapse: inherit;                              
                            
适用范围

border-collapse属性可以在表格或内联表格中使用。

在线演示

下面的两个表格分别演示了Separate模式和Collapsed模式的表格边框效果:

Separate模式边框
表头1 表头2 表头3
单元格1-1 单元格1-2 单元格1-3
单元格2-1 单元格2-2 单元格2-3
单元格3-1 单元格3-2 单元格3-3

浏览器支持

所有的现代浏览器都支持border-collapse属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论