全网云cms网站管理系统

CSS样式中表格内容隔行变色效果设置

来源：全网云cms网站管理系统 日期：2017-11-25 11:30:57 属于：前端开发
有时候一个表格里面有很多数据，让人看上去很累，也容易看错，这时候，可以通过隔行变色来修饰一下表格，这个用法比较常见，所以单独做一节来演示。表格代码跟上一节比较接近，只是单独加了一行css来控制隔行变色，通过类test来引入样式即可，完整测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.allcss{
border-collapse:collapse;
text-align:center;
}
.test{
background-color:#C4F2F7;}
 
</style>
</head>
 
<body>
<table width="500" border="1" class="allcss">
  <caption>
    SEOWHY DEMO 隔行变色CSS示范
  </caption>
  <tr bgcolor="#51DBE6">
    <th scope="col">姓名</th>
    <th scope="col">年龄</th>
    <th scope="col">分数</th>
  </tr>
  <tr>
    <th scope="row">李彦宏</th>
    <td>15</td>
    <td>88</td>
  </tr>
  <tr class="test">
    <th scope="row">马云</th>
    <td>16</td>
    <td>89</td>
  </tr>
  <tr>
    <th scope="row">马化腾</th>
    <td>17</td>
    <td>87</td>
  </tr>
  <tr class="test">
    <th scope="row">张三</th>
    <td>22</td>
    <td>95</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>23</td>
    <td>96</td>
  </tr>
  <tr class="test">
    <th scope="row">王五</th>
    <td>21</td>
    <td>98</td>
  </tr>
</table>
</body>
</html>
  
从代码可以看出，隔行变色，在tr标签里面引入test类即可，test的样式在head里面已经写好了对应的背景颜色。