table細線表格詳解

admin發表於2018-09-25

細線表格邊框比預設的表格邊框更受歡迎，下面分享一個程式碼例項，並介紹一下它的實現原理。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.table{
  border:1px solid #ccc;
  border-collapse:collapse;
  width:80%;
}
.table th, .table td{
  border:1px solid #ccc;
  padding:10px;
  text-align:center;
}
</style>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>id</th>
      <th>作者</th>
      <th>書名</th>
      <th>內容</th>
      <th>分類</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一</td>
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
      <td>螞蟻部落四</td>
    </tr>
    <tr class="success">
      <td>二</td>
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
      <td>螞蟻部落四</td>
    </tr>
  </tbody>
</table>
</body>
</html>

程式碼實現了表格的細線表格效果，實現原理如下:

首先通過以下程式碼設定單條邊框的樣式:

[CSS] 純文字檢視 複製程式碼
border:1px solid #ccc;

在預設條件下，每一個td的單元格邊框都會顯示，無論是否相鄰:

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/152409pzzktfr4xzmy45mf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通常這種效果是不理想的，希望相鄰的邊框合併，可以利用如下程式碼:

[CSS] 純文字檢視 複製程式碼
border-collapse:collapse;

相關文章