当鼠标经过表格数据行时颜色不同且奇偶行颜色

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

复制代码

代码如下:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="table.css" type="text/css" rel="stylesheet" />
<title>table test</title>

</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>
/
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;
}

上一篇：加了important标记css样式的jQuery写法下一篇：CSS Less框架基础教程

当鼠标经过表格数据行时颜色不同且奇偶行颜色

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

当鼠标经过表格数据行时颜色不同且奇偶行颜色

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设