zoukankan      html  css  js  c++  java
  • 表格隔行换色

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			table th {/*表头样式*/				
    				background: #0090D7;
    				font-weight: normal;
    				line-height: 30px;
    				font-size: 14px;
    				color: #FFF;
    			}
    			td,th {
    				 100px;
    				height: 40px;
    				line-height: 40px;
    				text-align: center;
    			}
    			table tr:nth-child(odd) {/*奇数行*/				
    				background: #F4F4F4;
    			}			
    			table td:nth-child(even) {/*偶数列*/				
    				color: #C00;
    			}
    		</style>
    	</head>
    	<body>
    		<table>
    			<thead>
    				<th>name</th>
    				<th>age</th>
    				<th>gender</th>
    			</thead>
    			<tbody>
    				<tr>
    					<td>111</td>
    					<td>12</td>
    					<td>male</td>
    				</tr>
    				<tr>
    					<td>222</td>
    					<td>15</td>
    					<td>female</td>
    				</tr>
    				<tr>
    					<td>333</td>
    					<td>14</td>
    					<td>male</td>
    				</tr>
    				<tr>
    					<td>444</td>
    					<td>18</td>
    					<td>male</td>
    				</tr>
    				<tr>
    					<td>555</td>
    					<td>18</td>
    					<td>male</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>
    

      如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!

  • 相关阅读:
    第九周总结
    第八周总结
    第六周
    中国历史上成功的两个人
    第五周总结
    第四周总结
    关于IT行业的抄袭事件
    第三周总结
    第二周总结
    第九周
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11174641.html
Copyright © 2011-2022 走看看