css border-collapse屬性怎麼用
- 青灯夜游原創
- 2019-05-30 09:34:054192瀏覽
border-collapse屬性是用於表格元素的, 可以用來設定表格的兩邊框合併為一個單一的邊框。所有主流瀏覽器都支援 border-collapse 屬性。
css border-collapse屬性怎麼用？
border-collapse 屬性設定表格的邊框是否合併為單一的邊框，或是像在標準的 HTML 中分開顯示。
語法：
border-collapse: separate|collapse|inherit;
屬性值：
● separate：預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
● collapse：如果可能，邊框會合併為單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
● inherit：規定應該從父元素繼承 border-collapse 屬性的值。
註解：所有主流瀏覽器都支援 border-collapse 屬性。任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。如果沒有規定 !DOCTYPE，則 border-collapse 可能會產生意想不到的結果。
css border-collapse屬性 範例
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Bill</td>
<td>20</td>
</tr>
<tr>
<td>Steven</td>
<td>25</td>
</tr>
</table>
</body>
</html>效果圖：
以上是css border-collapse屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn