加入收藏 | 设为首页 | 会员中心 | 我要投稿 聊城站长网 (https://www.0635zz.com/)- 智能语音交互、行业智能、AI应用、云计算、5G!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS里collapse属性是干什么的,怎么用?

发布时间:2023-08-19 14:23:41 所属栏目:语言 来源:
导读: CSS里collapse属性是干嘛的?CSS中的collapse其实是合并边框的意思,其使用语法是元素{border-collapse:collapse;}。下文给大家分享了具体的使用示例,对加深理解collapse属性会有帮助,感兴趣的朋友就继续往下看吧
 CSS里collapse属性是干嘛的?CSS中的collapse其实是合并边框的意思,其使用语法是元素{border-collapse:collapse;}。下文给大家分享了具体的使用示例,对加深理解collapse属性会有帮助,感兴趣的朋友就继续往下看吧。
 
    本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

    CSS中的border-collapse属性是用来设置表格边框是否合并,它有三个值其中separate表示分离边框,collapse表示合并边框,inherit 表示从父级那继承属性
 
    在制作表格的时候我们可以通过border-collapse 属性来使两个边框合并为一个,使得边框效果更加美观。
 
    border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。
 
    示例如下:
 
<html>
 
<head>
 
<style type="text/css">
 
table{
 
  border-collapse:collapse;
 
  }
 
table, td, th{
 
  border:1px solid black;
 
  }
 
</style>
 
</head>
 
<body>
 
<table>
 
<tr>
 
<th>Firstname</th>
 
<th>Lastname</th>
 
</tr>
 
<tr>
 
<td>Bill</td>
 
<td>Gates</td>
 
</tr>
 
<tr>
 
<td>Steven</td>
 
<td>Jobs</td>
 
</tr>
 
</table>
 
<p><b>注释:</b>如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误。</p>
 
</body>
 
</html>
 
 

(编辑:聊城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章