css實(shí)現(xiàn)隔行換色
學(xué)習(xí)感悟
首先為單數(shù)行建立class
之后利用選擇器選擇相應(yīng)的行就可以了。
不是很優(yōu)雅的實(shí)現(xiàn)方式寺庄。邪意。
代碼實(shí)現(xiàn)
<style>
.biao{
border:1px solid;
}
.biao tr.backrow{
background-color:yellow;
}
</style>
<!--html-->
<table class="biao" border="1" align="center" width = "80%" >
<tr><!-- th 加粗掘譬，居中-->
<td class="cen">姓名</td>
<td class="cen">英語</td>
<td class="cen">數(shù)據(jù)結(jié)構(gòu)</td>
<td class="cen">數(shù)據(jù)庫</td>
<td class="cen">線性代數(shù)</td>
<td class="cen">離散數(shù)學(xué)</td>
<td class="cen">操作系統(tǒng)</td>
</tr>
<tr class="backrow">
<td class="cen">影魔</td>
<td class="cen">78</td>
<td class="cen">77</td>
<td class="cen">80</td>
<td class="cen">90</td>
<td class="cen">12</td>
<td class="cen">55</td>
</tr>
<tr>
<td class="cen">祈求者</td>
<td class="cen">43</td>
<td class="cen">23</td>
<td class="cen">78</td>
<td class="cen">67</td>
<td class="cen">78</td>
<td class="cen">73</td>
</tr>
<tr class="backrow">
<td class="cen">暗夜游俠</td>
<td class="cen">78</td>
<td class="cen">56</td>
<td class="cen">55</td>
<td class="cen">73</td>
<td class="cen">83</td>
<td class="cen">74</td>
</tr>
<tr>
<td class="cen">賞金獵人</td>
<td class="cen">94</td>
<td class="cen">35</td>
<td class="cen">74</td>
<td class="cen">96</td>
<td class="cen">32</td>
<td class="cen">67</td>
</tr>
<tr class="backrow">
<td class="cen">椰子船長</td>
<td class="cen">76</td>
<td class="cen">78</td>
<td class="cen">54</td>
<td class="cen">45</td>
<td class="cen">56</td>
<td class="cen">67</td>
</tr>
<tr>
<td class="cen">暗夜刺客</td>
<td class="cen">78</td>
<td class="cen">56</td>
<td class="cen">67</td>
<td class="cen">45</td>
<td class="cen">90</td>
<td class="cen">67</td>
</tr>
<tr class="backrow">
<td class="cen">骷髏王</td>
<td class="cen">78</td>
<td class="cen">56</td>
<td class="cen">44</td>
<td class="cen">56</td>
<td class="cen">67</td>
<td class="cen">34</td>
</tr>
<tr>
<td class="cen">山嶺巨人</td>
<td class="cen">56</td>
<td class="cen">76</td>
<td class="cen">45</td>
<td class="cen">34</td>
<td class="cen">76</td>
<td class="cen">78</td>
</tr>
</table>
