<html>

<head>

<title>Member List</title>

<style>

<!--

.datalist{

	border:1px solid #0058a3;	/* 表格边框 */

	font-family:Arial;

	border-collapse:collapse;	/* 边框重叠 */

	background-color:#eaf5ff;	/* 表格背景色 */

	font-size:14px;

}

.datalist caption{

	padding-bottom:5px;

	font:bold 1.4em;

	text-align:left;

}

.datalist th{

	border:1px solid #0058a3;	/* 行名称边框 */

	background-color:#4bacff;	/* 行名称背景色 */

	color:#FFFFFF;				/* 行名称颜色 */

	font-weight:bold;

	padding-top:4px; padding-bottom:4px;

	padding-left:12px; padding-right:12px;

	text-align:center;

}

.datalist td{

	border:1px solid #0058a3;	/* 单元格边框 */

	text-align:left;

	padding-top:4px; padding-bottom:4px;

	padding-left:10px; padding-right:10px;

}

.datalist tr.altrow{

	background-color:#c7e5ff;	/* 隔行变色 */

}

-->

</style>

   </head>

<body>

<table class="datalist" summary="list of members in EE Studay">

	<caption>Member List</caption>

	<tr>

		<th scope="col">Name</th>

		<th scope="col">Class</th>

		<th scope="col">Birthday</th>

		<th scope="col">Constellation</th>

		<th scope="col">Mobile</th>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>isaac</td>

		<td>W13</td>

		<td>Jun 24th</td>

		<td>Cancer</td>

		<td>1118159</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>girlwing</td>

		<td>W210</td>

		<td>Sep 16th</td>

		<td>Virgo</td>

		<td>1307994</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>tastestory</td>

		<td>W15</td>

		<td>Nov 29th</td>

		<td>Sagittarius</td>

		<td>1095245</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>lovehate</td>

		<td>W47</td>

		<td>Sep 5th</td>

		<td>Virgo</td>

		<td>6098017</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>slepox</td>

		<td>W19</td>

		<td>Nov 18th</td>

		<td>Scorpio</td>

		<td>0658635</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>smartlau</td>

		<td>W19</td>

		<td>Dec 30th</td>

		<td>Capricorn</td>

		<td>0006621</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>whaler</td>

		<td>W19</td>

		<td>Jan 18th</td>

		<td>Capricorn</td>

		<td>1851918</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>shenhuanyan</td>

		<td>W25</td>

		<td>Jan 31th</td>

		<td>Aquarius</td>

		<td>0621827</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>tuonene</td>

		<td>W210</td>

		<td>Nov 26th</td>

		<td>Sagittarius</td>

		<td>0091704</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>ArthurRivers</td>

		<td>W91</td>

		<td>Feb 26th</td>

		<td>Pisces</td>

		<td>0468357</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>reconzansp</td>

		<td>W09</td>

		<td>Oct 13th</td>

		<td>Libra</td>

		<td>3643041</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>linear</td>

		<td>W86</td>

		<td>Aug 18th</td>

		<td>Leo</td>

		<td>6398341</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>laopiao</td>

		<td>W41</td>

		<td>May 17th</td>

		<td>Taurus</td>

		<td>1254004</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>dovecho</td>

		<td>W19</td>

		<td>Dec 9th</td>

		<td>Sagittarius</td>

		<td>1892013</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>shanghen</td>

		<td>W42</td>

		<td>May 24th</td>

		<td>Gemini</td>

		<td>1544254</td>

	</tr>

	<tr class="altrow">		<!-- 偶数行 -->

		<td>venessawj</td>

		<td>W45</td>

		<td>Apr 1st</td>

		<td>Aries</td>

		<td>1523753</td>

	</tr>

	<tr>					<!-- 奇数行 -->

		<td>lightyear</td>

		<td>W311</td>

		<td>Mar 23th</td>

		<td>Aries</td>

		<td>1002908</td>

	</tr>

</table>

</body>

</html>

css 实现table 隔行变色的更多相关文章

  1. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  2. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  3. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  4. jquery学习笔记(4)--实现table隔行变色以及单选框选中

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. jquery table 隔行变色+点谁谁变色

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. 表格table隔行变色

    if($('.p03-s2').find('table').length >= 2) {$('table:last-child').css({'borderTop': 'none'});}if( ...

  7. table隔行变色

    table tr:nth-child(2n) {         background: #EEF8F0;     }     table tr:nth-child(2n+1) {         b ...

  8. CSS3 设置 Table 隔行变色

    table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;}

  9. Table隔行变色的JavaScript代码

    <table id="datatable"> <tr> <td>脚本之家</td> </tr> <tr> & ...

随机推荐

  1. Android菜鸟的成长笔记（5）——Android系统源代码你下载了吗？

    原文:Android菜鸟的成长笔记(5)--Android系统源代码你下载了吗? 在上一篇中我们用Android系统源代码分析了我们前面写的代码,有的朋友可能就会问怎么才能下载到Google官方的源代 ...

  2. OCA读书笔记(6) - 配置Oracle网络环境

    6.Configuring the Oracle Network Environment su - grid装grid时自动创建了监听netca--创建新的监听 vi $ORACLE_HOME/net ...

  3. 让动态创建的ActiveX控件响应Windows消息

    当我们通过 CWnd::CreateControl() 动态创建 ActiveX   控件时, Windows 消息并不会被发送给我 们的由   CWnd 派生得控件类.例如,即使我们为 WM_KIL ...

  4. Linux 双网卡绑定技术

    bond技术是在linux2.4以后加入内核. 一般步骤是1.把bonding模块加入内核, 2 编辑要绑定的网卡设置,去除地址设定 3 添加bond设备,设置地址等配置 4  重启网络 5 在交换机 ...

  5. rcp（插件开发）org.eclipse.ui.decorators 使用

    org.eclipse.ui.decorators这个扩展点可以为对应的节点添加不同的图标显示. 使用方式都差不多,以下就转载一下使用方式: 1.添加扩展点 org.eclipse.ui.decora ...

  6. Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException

    1.错误描写叙述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -he ...

  7. Apache+windows server2008 外网访问配置

    之前在一个服务器上部署一个apache网站,在局域网内都可以访问,但是外网始终访问不了,经常多次谷歌,把解决方案总结出来. 下面就默认部署apache自带的网站.系统:windows server20 ...

  8. heapq

    heapq-Guest-ChinaUnix博客 假设你需要维护一个列表,这个列表不断有新的元素加入,你需要在任何时候很方便的得到列表中的最大(小)值,因此要求列表始终处于排序完毕状态,怎么办呢 最简单 ...

  9. 开源mp3播放器--madplay 编译和移植 简记

    madplay是一款开源的mp3播放器. http://madplay.sourcearchive.com/ 下面简单记录一下madplay的编译与移植到ARM开发板上的过程 一.编译x86版本的ma ...

  10. Python的经典问题——中文乱码

    关键字:Python UTF-8 GBK 中文 乱码 估计入门时都会遇到的.我是在windows下用的Python25自带的IDLE编辑运行的,发现运行脚本得出的结果有一些中文显示是乱码,但有一些是正 ...