当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)

Posted on 2017-10-01 17:11 快乐家++ 阅读(534) 评论(0) 编辑收藏举报

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
-->
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
<title>table test</title> 
 <style> 
  
/* 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
*/ 
/* 
Created on : 2014-7-9, 14:24:31 
Author : Administrator 
*/ 
body{ margin:0 auto; text-align:center} 
/*设置表头的margin为0则表居中显示，border为0则无边界*/ 
table{margin:0 auto; 
border:0px; 
solid:#000 
} 
/*设置th表头的属性，font-weight为bold则显示为黑粗*/ 
table tr th{ height:28px; 
width: auto; 
line-height:28px; 
background:#999; 
font-weight:bold 
} 
table tbody tr{ 
height:28px; 
line-height:28px; 
text-align:center; 
background:#FFF; 
vertical-align:middle; 
} 
/* 
*设置鼠标经过颜色的变化 
*/ 
/*采用csss的这个方法，获得奇数行，让后设置其属性，这样避免使用expression这个容易出错的方法*/ 
table tbody tr:nth-child(odd){ 
background-color: #DEDEDE 
} 
 
table tbody tr:hover{ 
background-color: #CCCCCC; 
} 
</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>

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

快乐家++ (Alan)

公告

搜索

常用链接

最新随笔

我的标签

随笔分类 (158)

随笔档案 (251)

文章分类 (13)

文章档案 (13)

相册 (1)

Ajax

css

DNN网站

DotNet学习资料

阅读排行榜

评论排行榜

推荐排行榜

最新评论

当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)