CSS設(shè)置表格斑馬紋效果

在CSS中，我們可以使用一個(gè)簡單的樣式規(guī)則來設(shè)置表格的斑馬紋效果，這種效果通常用于改善表格的可讀性，通過給表格中的行添加不同的背景顏色來實(shí)現(xiàn)。

我們需要?jiǎng)?chuàng)建一個(gè)包含表格的HTML文件，我們可以使用CSS的:nth-child偽類來選中表格中的偶數(shù)行，并給它們添加不同的背景顏色，我們可以給偶數(shù)行添加背景顏色#f0f0f0，這樣它們就會(huì)呈現(xiàn)出一個(gè)斑馬紋的效果。

以下是一個(gè)示例代碼：

HTML代碼：

<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
  <tr>
    <td>***五</td>
    <td>30</td>
    <td>男</td>
  </tr>
  <tr>
    <td>趙六</td>
    <td>35</td>
    <td>女</td>
  </tr>
  <tr>
    <td>孫七</td>
    <td>40</td>
    <td>男</td>
  </tr>
  <tr>
    <td>周八</td>
    <td>45</td>
    <td>女</td>
  </tr>
  <tr>
    <td>吳九</td>
    <td>50</td>
    <td>男</td>
  </tr>
  <tr>
    <td>鄭十</td>
    <td>55</td>
    <td>女</td>
  </tr>
</table>

CSS代碼：

table tr:nth-child(even) {
  background-color: #f0f0f0;
}

在這個(gè)示例中，我們給表格中的偶數(shù)行添加了背景顏色#f0f0f0，從而實(shí)現(xiàn)了斑馬紋效果，你可以根據(jù)自己的需求調(diào)整這個(gè)樣式規(guī)則，比如改變背景顏色或者添加其他樣式效果。