当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯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>
当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)的更多相关文章
- 如何修改antd中表格的表头样式和奇偶行颜色交替
在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...
- html table奇偶行颜色设置 (CSS选择器)
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...
- table中嵌套table，如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
- tab奇偶行颜色交替+插件
(function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...
- flex 4 datagrid 奇偶行颜色设置
<s:DataGrid width="100%" height="100%" alternatingRowColors="[#ffFFff,#e ...
- Bootstrap table插件 被选中的行颜色改变
参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...
- JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示
思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定: 前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...
- table 控制单双行颜色以及鼠标hover颜色 table光棒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何在Word表格中的某一栏添加背景颜色
如何在Word表格中的某一栏添加背景颜色 编写人:CC阿爸 2014-3-14 用鼠标选中某一个单元格然后右键单击 下拉菜单选择.<边框和低纹>然后点<低纹>选项卡 选中色卡 ...
随机推荐
- aqua data studio 连接db2
打开datastudio 右键本地数据库服务器 →注册服务器打开以下界面: 1:选择版本号(我这里是window 9.7版本的db2) 2:名称 按照需要的写 3.登录名/密码 4.ip port 数 ...
- c++ string 转double
#include <iostream>#include <sstream> //使用stringstream需要引入这个头文件using namespace std; Type ...
- php优秀框架codeigniter学习系列——CI_Controller分析
该类是一个超级大的父类,它将在 CodeIgniter.php 中实例化化过的类,通通加载成它的类成员变量,所以可以方便的进行各种操作.各种应用控制器类,都会继承 CI_Controller 类. _ ...
- python安装后环境变量的设置
win7系统中单击右击计算机->属性->高级系统设置->环境变量 在path目录下用分号分开做分割添加环境变量. 如果同时添加python2.x.x版本和python3.x.x版本两 ...
- asp.net webapi 生成在线文档--Swagger
第一步:使用nuget包获取Swashbule.swagger.net.ui的包并安装. 安装成功后 打开App_Start->SwaggerNet.cs 注释掉一下两行 //[assembly ...
- 剑指Offer 62. 二叉搜索树的第k个结点 （二叉搜索树）
题目描述 给定一棵二叉搜索树,请找出其中的第k小的结点.例如, (5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4. 例如, 5 / \ 3 7 / \ / \ 2 4 6 ...
- 基于vue的图片查看插件vue-photo-preview
1. 安装 在任务管理器中输入命令 2. 在项目main.js中引入 3.在所需要的项目中直接使用 还有两个属性,可以看需求添加 preview-title-enable="false&qu ...
- C# TCP与UDP
Http使用端口是80 SMTP使用端口是25 TCP是首选协议,它提供有保证的传输.错误校正和缓冲. System.Net.Sockets. TcpClient类封装了TCP链接,提供属性字段来控制 ...
- 搭建QT环境
开始使用QT时,环境配置好了,以后才不会有这方面的麻烦,所以第一步,把自己的工作环境搭建好! 下面是我的环境搭建过程,留个记录,也为了后来者能少走一些弯路. 注:本人的系统是WIN7x64位的,其他系 ...
- Linux下MySQL在知道密码的情况下修改密码
1.在知道原密码的情况下,进入MySQL: mysql -u root -p 2.进入 mysql数据库,然后通过语句修改密码: 我的MySQL版本是:mysql Ver 14.14 Distrib ...