當鼠標通過表格數據行時顏色不一樣且奇偶行顏色也不一樣 (純CSS)

時間 2019-11-06

標籤鼠標通過表格數據行時顏色不一樣奇偶 css 欄目 CSS 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。