溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么用border-collapse屬性，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
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屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
