zoukankan      html  css  js  c++  java
  • AngularJS之表格设置样式

    1、问题背景

         AngularJS表格table,利用样式设置表格间隔色


    2、实现源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>AngularJS之表格设置样式</title>
    		<link rel="stylesheet" href="../css/bootstrap.css" />
    		<script src="http://cdn.static.runoob.com/libs/angular.j/1.4.6/angular.min.js"></script>
    		<style>
    			table,th,td{
    				border-collapse: collapse;
    			}
    			table tr:nth-child(even){
    				background-color: #F7E1B5;
    			}
    			table tr:nth-child(odd){
    				background-color: #F1F1F1;
    			}
    		</style>
    	</head>
    	<body>
    		<div ng-app="tableStyleApp" ng-controller="tableStyleController">
    			<table class="table table-bordered table-condensed">
    				<thead>
    					<tr>
    						<th>序号</th>
    						<th>姓名</th>
    						<th>年龄</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr>
    						<td>2016010101</td>
    						<td>张峰</td>
    						<td>23</td>
    					</tr>
    					<tr>
    						<td>2016010102</td>
    						<td>李思思</td>
    						<td>22</td>
    					</tr>
    					<tr>
    						<td>2016010103</td>
    						<td>华章</td>
    						<td>21</td>
    					</tr>
    					<tr>
    						<td>2016010104</td>
    						<td>孙海</td>
    						<td>22</td>
    					</tr>
    					<tr>
    						<td>2016010105</td>
    						<td>胡迪</td>
    						<td>20</td>
    					</tr>
    					<tr>
    						<td>2016010106</td>
    						<td>升比</td>
    						<td>25</td>
    					</tr>
    					<tr>
    						<td>2016010107</td>
    						<td>柳丝丝</td>
    						<td>24</td>
    					</tr>
    					<tr>
    						<td>2016010108</td>
    						<td>王武</td>
    						<td>22</td>
    					</tr>
    					<tr>
    						<td>2016010109</td>
    						<td>诸葛云</td>
    						<td>21</td>
    					</tr>
    					<tr>
    						<td>2016010110</td>
    						<td>刘云</td>
    						<td>22</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    	</body>
    </html>
    

    3、实现结果


  • 相关阅读:
    *args, **kwargs
    python format函数
    python自省
    生成器与迭代器
    python面试题
    xpath和gzip
    python正则表达式
    cookie
    random
    杭电1710 (已知二叉树前中序 求后序)
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314019.html
Copyright © 2011-2022 走看看