如何用CSS實現(xiàn)表格隔行變色

在網(wǎng)頁設計中，我們經(jīng)常使用表格來展示數(shù)據(jù)，為了讓表格更加易讀，我們可以使用CSS來實現(xiàn)表格隔行變色，下面是一種簡單的方法來實現(xiàn)這個效果。

我們需要創(chuàng)建一個表格，假設我們有一個包含姓名、年齡和城市的表格，代碼如下：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>***五</td>
    <td>25</td>
    <td>廣州</td>
  </tr>
  <tr>
    <td>趙六</td>
    <td>35</td>
    <td>深圳</td>
  </tr>
</table>

我們可以使用CSS的:nth-child()選擇器來選中表格中的偶數(shù)行，并應用一個不同的背景顏色，代碼如下：

#myTable tr:nth-child(even) {
  background-color: #f2f2f2;
}

在這個CSS代碼中，#myTable是表格的ID，tr:nth-child(even)表示選中表格中的偶數(shù)行。background-color: #f2f2f2;表示應用一個淡灰色的背景顏色。

我們刷新網(wǎng)頁，就可以看到表格中的偶數(shù)行已經(jīng)被應用了一個淡灰色的背景顏色，實現(xiàn)了隔行變色的效果。