CSS border-collapse 細線邊框

admin發表於2018-08-01
CSS

預設狀態下table邊框比較粗一點，是非常醜陋的粗（粗是由於相鄰單元格邊框未合併導致的視覺效果）。

實現表格細線邊框效果的方式有多種，CSS也提供了專門的屬性。

border-collapse屬性可以完美實現標題中的需求。

語法結構如下：

[CSS] 純文字檢視 複製程式碼
border-collapse：separate | collapse

引數解析:

（1）.separate：預設值，規定單元格邊框不合並。

（2）.collapse：規定單元格邊框合併。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style> 
table, td { 
  border:1px solid green; 
}
</style> 
</head>
<body>
<table>
  <tr>
    <td>編號</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr>
    <td>1</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>2</td>
    <td>21</td>
    <td>女</td>
  </tr>
</table>
</body>
</html>

預設情況下，邊框沒有合併，每一個單元格都有獨立完整的邊框，比較醜陋。

在文章開頭說錯的"粗"，基本就是由於邊框沒有合併導致的視覺效果。

再來看一段例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
table, td { 
  border:1px solid green; 
}
.collapse {
  border-collapse:collapse; 
}
</style> 
</head>
<body>
<table class="collapse">
  <tr>
    <td>編號</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr>
    <td>1</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>2</td>
    <td>21</td>
    <td>女</td>
  </tr>
</table>
</body>
</html>

上面的程式碼將邊框進行了合併，是不是更加符合實際應用需求，當然還有進一步美化的空間。

相關文章