• css 实现table 隔行变色


    <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>
    
  • 相关阅读:
    spring中@Autowired与 @Resource区别
    linux系统镜像iso文件下载
    log4j.properties配置说明学习网址
    maven常用命令
    mysql优化
    mybatis与hibernate区别
    struts2与SpringMVC区别
    java同步锁实现方法
    java多线程的四种实现方式
    java单例模式几种实现方式
  • 原文地址:https://www.cnblogs.com/sihuanian/p/4794385.html
Copyright © 2020-2023  润新知