table隔行变色

一、今天做一个音乐网站，需要用到这个功能，直接上代码了。

 

二、创建一个table

<table border="0" class="song-table">
<tbody>
<tr>
<th class="th-width1"></th>
<th class="th-width3">标题</th>
<th class="th-width1">时长</th>
<th class="th-width2">歌手</th>
<th class="th-width2">专辑</th>
</tr>
<tr>
<td>1、<i class="fa fa-play-circle-o lfg-play" aria-hidden="true"></i></td>
<td>飘洋过海来看你</td>
<td>04:32</td>
<td>梁静茹</td>
<td>爱的大游行</td>
</tr>
<tr>
<td>2、<i class="fa fa-play-circle-o lfg-play" aria-hidden="true"></i></td>
<td>凉凉</td>
<td>04:32</td>
<td>张碧晨</td>
<td>三生三世</td>
</tr>
<tr>
<td>3、<i class="fa fa-play-circle-o lfg-play" aria-hidden="true"></i></td>
<td>小幸运</td>
<td>04:32</td>
<td>金玟岐</td>
<td>小幸运</td>
</tr>
<tr>
<td>4、<i class="fa fa-play-circle-o lfg-play" aria-hidden="true"></i></td>
<td>勇气来看你</td>
<td>04:22</td>
<td>梁静茹</td>
<td>爱的大游行</td>
</tr>
<tr>
<td>5、<i class="fa fa-play-circle-o lfg-play" aria-hidden="true"></i></td>
<td>第一次</td>
<td>04:32</td>
<td>光良</td>
<td>通话</td>
</tr>
<tr>
<td>6、<i class="fa fa-play-circle-o lfg-play" aria-hidden="true"></i></td>
<td>DayByDay</td>
<td>04:32</td>
<td>TARA</td>
<td>KPOP</td>
</tr>
</tbody>
</table>

三、写入css样式

table tr:nth-child(2n){
background-color: #fbc9a7;
}

 

四、效果如下

 

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com