border-collapse屬性怎麼用
- 青灯夜游原創
- 2019-02-16 09:56:306959瀏覽
border-collapse屬性是用於表格元素的, 可以設定表格的兩邊框合併為一個單一的邊框。
CSS border-collapse屬性
##border-collapse屬性設定表格的邊框是否合併為一個單一的邊框，還是像在標準的HTML 中那樣分開顯示。它有兩個值：
separate：預設值，邊框是分開的；每個單元格都會顯示自己的邊框collapse ：如果可能，邊框會合併為單一的邊框（此時，border-spacing 和empty-cells 屬性是無效的）。說明：所有主流瀏覽器都支援 border-collapse屬性。
註：border-collapse屬性，如果沒有指定!DOCTYPE，可能會產生意想不到的效果。
CSS border-collapse屬性的使用範例：
#下面透過簡單程式碼範例來看看border-collapse屬性的使用：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type = "text/css">
.box{
width: 400px;
margin: 100px auto;
}
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding:10px 50px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px 50px;
}
</style>
</head>
<body>
<div class="box">
<table class = "one">
<caption>边框折叠示例</caption>
<tr><td class = "a">单元格A折叠示例</td></tr>
<tr><td class = "b">单元格B折叠示例</td></tr>
</table>
<br />
<table class = "two">
<caption>边框分隔示例</caption>
<tr><td class = "a">单元格A分隔示例</td></tr>
<tr><td class = "b">单元格B分隔示例</td></tr>
</table>
</div>
</body>
</html>效果圖：
#
以上是border-collapse屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn