CSS中的border-collapse屬性是用來設定表格邊框是否合併，它有三個值其中separate表示分離邊框，collapse表示合併邊框，inherit 表示從父級那繼承屬性
在製作表格的時候我們可以透過border-collapse 屬性來使兩個邊框合併為一個，使得邊框效果更加美觀，今天將要介紹如何使用border-collapse 屬性以及它的兩個值的區別
【推薦課程：CSS教學】
border-collapse屬性的意義：
border-collapse 屬性是用來設定表格的邊框是否合併成單一的邊框，或是像在table中設定了border後邊框獨自分開顯示
border-collapse 屬性的值
separate
這個屬性值代表的是邊框會被分開，不會忽略border-spacing 和empty-cells 屬性，它是預設屬性值
border-spacing：指的是相鄰單元格的邊框間的距離，因此我們可以透過該屬性來設定邊框之間的間距
empty-cells：指的是是否顯示表格中的空白儲存格
注意：這兩個屬性都只能在分離邊框中使用
table{
font-size:16px;
color:#333333;
border-collapse: separate;
border-spacing: 12px;
}
th{
border:1px solid #444;
padding:25px;
}
td{
border:1px solid #444;
padding: 15px;
}
tr{
background:rgb(207,238,252);
}
</style>效果圖：
collapse
#指的是將表格中的邊框合併為單一的邊框，對於border-spacing 和empty- cells 屬性會自動忽略
範例：
<style>
table{
font-size:16px;
color:#333333;
border-collapse: collapse;
}
th{
border:1px solid #444;
padding:25px;
}
td{
border:1px solid #444;
padding: 15px;
}
tr{
background:rgb(207,238,252);
}
</style>效果圖：
##inherit
#指的是從父元素繼承border-collapse 屬性的值。separate 與collapse的差異：
separate值是表示邊框會被分離不會合併為一個邊框，而collapse值表示的是邊框會被合併成單一的邊框，而且會忽略border-spacing 和empty-cells 屬性總結：以上就是本篇文章的全部內容了，透過本篇文章希望對大家學習表格樣式有所幫助。以上是如何使用CSS中的border-collapse屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
