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>
    

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

  • 相关阅读:
    Power BI
    Power BI
    gulp的常用api
    关于promise
    webapp思路和rem适配极其viewport
    react初识
    node基础再现--module.exports 和exports
    sublime的js调试环境(基于node环境)
    题解 poj2778 DNA Sequence
    题解 TJOI/HEOI2016 字符串
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11174641.html
Copyright © 2011-2022 走看看