<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. java中subString、split、stringTokenizer三种截取字符串方法的性能比较(转)

    最近在阅读java.lang下的源码,读到String时,突然想起面试的时候曾经被人问过:都知道在大数据量情况下,使用String的split截取字符串效率很低,有想过用其他的方法替代吗?用什么替代? ...

  2. 读一读Scktsrvr.exe的源程序

    读一读Scktsrvr.exe的源程序 使用DELPHI做多层开发的朋友们都应该对Scktsrvr.exe这个程序不陌生的,Borland公司在DELPHI中给出了它的源代码.这是一个900来行的程序 ...

  3. drupal THEME主要文件

    **.info 文件** .info 文件是一个必需的文件:Drupal 必须包括它,才干看到主题. .info 文件告诉 Drupal 主题的内部名称.比如,假设这个文件的名称是 ibmtheme. ...

  4. dvtm: 平铺式终端管理器 — LinuxTOY

    dvtm: 平铺式终端管理器 — LinuxTOY LinuxTOY 是一个致力于提供 Linux 相关资讯的专题站点.如果您发现了好用好玩的 Linux 东东并愿意发扬自由.分享的精神,可以点击顶部 ...

  5. 怎样在Ubuntu上安装最新版本号的Node.js

    怎样在Ubuntu上安装最新版本号的Node.js 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Node.js是一个软件平台,通经常使用于构建大规模的 ...

  6. MVC多语言应用

    MVC多语言应用 最近发现资源文件是个好东西, 用的好了可以给开发人员借阅不少的时间. 例如做一个多语言的网站, 资源文件就有不小的用处. 这里以MVC4模版项目的登录页为例, 简单说一下过程: 1. ...

  7. About Unixstickers - Unixstickers - stickers on unix, programming, software, development and open source

    About Unixstickers - Unixstickers - stickers on unix, programming, software, development and open so ...

  8. android 自己定义通知栏遇到的问题

    首先看报错信息: E/AndroidRuntime(12220): FATAL EXCEPTION: main E/AndroidRuntime(12220): Process: gn.com.and ...

  9. Storm构建分布式实时处理应用初探（转）

    最近利用闲暇时间,又重新研读了一下Storm.认真对比了一下Hadoop,前者更擅长的是,实时流式数据处理,后者更擅长的是基于HDFS,通过MapReduce方式的离线数据分析计算.对于Hadoop, ...

  10. 乞讨N!到底有多少0

    分析: 对N质因数分解 N=2^x * 3^y * 5^z....因为10 = 2*5,所以末尾0的个数仅仅和x与z有关,每一对2和5相乘能够得到一个10.于是末尾0的个数=min(x,z).在实际中 ...