<!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)的更多相关文章

  1. 如何修改antd中表格的表头样式和奇偶行颜色交替

    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...

  2. html table奇偶行颜色设置 (CSS选择器)

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...

  3. table中嵌套table，如何用jquery来控制奇偶行颜色

    总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...

  4. tab奇偶行颜色交替+插件

    (function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...

  5. flex 4 datagrid 奇偶行颜色设置

    <s:DataGrid width="100%" height="100%" alternatingRowColors="[#ffFFff,#e ...

  6. Bootstrap table插件 被选中的行颜色改变

    参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...

  7. JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  8. table 控制单双行颜色以及鼠标hover颜色 table光棒

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 如何在Word表格中的某一栏添加背景颜色

     如何在Word表格中的某一栏添加背景颜色 编写人:CC阿爸 2014-3-14 用鼠标选中某一个单元格然后右键单击 下拉菜单选择.<边框和低纹>然后点<低纹>选项卡 选中色卡 ...

随机推荐

  1. mysql安装（centos 7)

    1.安装依赖 yum install -y cmake make gcc gcc-c++ libaio ncurses ncurses-devel cd /usr/local/src 链接:https ...

  2. mysql 5.7安装图解 mysql 5.7图文安装完整教程

    今天给搭建分享一个教程,mysql 5.7的安装操作,这里呢我叫大家怎么用二进制去安装mysql,其实在大多数的生产环境中使用二进制预编译的安装方式是最多了,下面大家跟着我的步骤去尝试着安装下吧. 先 ...

  3. datetime模块

    # 其中days = -2,可以根据需要进行替换,这样就可以得到不同需要的日期了. # # 另外:可以通过strftime方法,指定时间的输出格式. # # 除了以上输入的   %Y-%m-%d    ...

  4. 分频器的Verilog实现

    一.占空比50%的奇数分频 1.实现思路 实现奇数(N)分频,分别用上升沿计数到(N-1)/2,再计数到N-1:用下降沿计数到(N-1)/2,再计数到N-1,得到两个波形,然后把它们相或即可得到N分频 ...

  5. C++编程入门

    学习一门新的程序设计语言的最好方法就是练习编写程序. 每个C++程序都包含一个或多个函数,其中一个必须命名为main.操作系统通过调用main来运行C++程序. 一个函数定义包含四个部分:返回类型:函 ...

  6. keras 入门整理 如何shuffle，如何使用fit_generator 整理合集

    keras入门参考网址: 中文文档教你快速建立model keras不同的模块-基本结构的简介-类似xmind整理 Keras的基本使用(1)--创建,编译,训练模型 Keras学习笔记(完结) ke ...

  7. LoadRunner学习笔记（1）--异常处理方法

    1.查看端口号占用情况 cmd  -> netstat  -ano  找到进程关闭后在重启网站 2.LR录制脚本时为何不弹出IE浏览器 启动浏览器,打开Internet选项对话框,切换到高级标签 ...

  8. silverlight 从数据库获取到数据，动态生成XMLWEN文件，并获取文件进行操作

    // Silverlight中的独立存储是其内部的可信任的可访问文件空间,在这里你可以使用Silverlight随意的创建.读取.写入.删除目录和文件,它有一些类似于Cookie,但是它可以在客户端保 ...

  9. Java前后端依赖

    有时候我们的一个类需要依赖另外一个类,这种就是依赖关系,创建对象的工作一般由spring容器来完成然后注入给调用者,这种就是依赖注入. 代码可参考1227210565朋友空间 DispatcherSe ...

  10. centos7.5 时间设置

    # ----- 设置时间同步+时区(上海) ----- rpm -qa ntp || yum -y install ntp systemctl enable ntpd timedatectl set- ...