CSS表格隔行變色詳解

admin發表於2018-08-05
CSS

當表格資料量較大的時候，觀察某一行的資料就會帶來一定的困難。

表格隔行變色效果，則在一定程度上緩解此問題。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
table{
  margin:0 auto;
  border-collapse:collapse;
}
table tr th{
  height:28px;
  line-height:28px;
  background:#f0f7ff;
  border:1px solid #429fff;
}
table tr td{
  height:28px;
  width:120px;
  border:1px solid #429fff;
}
table tbody tr:nth-child(odd){
  background-color:#d2e8ff;
}
table tbody tr:hover{
  background-color:#CCC;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題二</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

上面程式碼實現表格隔行變色效果，主要利用CSS的兩個屬性。

相關閱讀:

（1）.border-collapse參閱CSS border-collapse一章節。

（2）.nth-child()參閱CSS E:nth-child(n)偽類選擇器一章節。

（3）.:hover參閱CSS E:hover偽類選擇器一章節。

相關文章