CSS表格隔行变色详解

2018-8-5 00:43| 作者: admin| 查看: 623| 评论: 0|来自: 钱柜手机网页版

当表格数据量较大的时候,观察某一行的数据就会带来一定的困难。

表格隔行变色效果,则在一定程度上缓解此问题。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="" /> 
<title>钱柜手机网页版</title>
<style>
table{
  margin:0 auto;
  border-collapse:collapse;
}
table tr th{
  height:28px;
  line-height:28px;
  background:#f0f7ff;
  border:1px solid #429fff;
}
table tr td{
  height:28px;
  width:120px;
  border:1px solid #429fff;
}
table tbody tr:nth-child(odd){
  background-color:#d2e8ff;
}
table tbody tr:hover{
  background-color:#CCC;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>标题一</th>
    <th>标题二</th>
    <th>标题二</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

上面代码实现表格隔行变色效果,主要利用CSS的两个属性。

相关阅读:

(1).border-collapse参阅CSS border-collapse一章节。

(2).nth-child()参阅CSS E:nth-child(n)伪类选择器一章节。

(3).:hover参阅CSS E:hover伪类选择器一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部