css border-collapse边框合并属性笔记

原创 PHP笔记  2017-11-24 20:53  阅读 1,989 views 次

在css中,border-collapse属性是用来设置表格的边框是合并为一个单一的边框,还是分开显示。

所有主要浏览器都支持border - collapse属性。但如果没有指定!DOCTYPE,border-collapse 属性在IE8及更早的IE浏览器中是不起作用的。

border-collapse属性值

  • collapse:边框合并为单一的边框(会忽略border-spacing属性和empty-cells属性)。
  • separate:边框分开显示(默认值)。
  • inherit:从父元素继承 border-collapse 属性的值。

语法格式:

border-collapse:collapse / separate / inherit ;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css border-collapse属性笔记</title>
<style>
#bc1 {border-collapse: separate;}
#bc2 { border-collapse: collapse;}
td,th { border: 1px solid black;}
</style>
<head/>
<body>
<p>边框分开:</p>
<table id="bc1">
<tr> <th>序号</th><th>web前端</th><th>服务器端</th></tr>
<tr><td>1</td><td>html</td><td>php</td></tr>
<tr><td>2</td><td>css</td><td>java</td></tr>
</table>
<p>边框合并:</p>
<table id="bc2">
<tr> <th>序号</th><th>web前端</th><th>服务器端</th></tr>
<tr><td>1</td><td>html</td><td>php</td></tr>
<tr><td>2</td><td>css</td><td>java</td></tr>
</table>
</body>
</html>

运行结果:

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-border-collapse.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情