溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)AngularJS中怎么設(shè)置表格樣式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
1、問題背景
AngularJS表格table，利用樣式設(shè)置表格間隔色
2、實(shí)現(xiàn)源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之表格設(shè)置樣式</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
<script src="http://apps.bdimg.com/libs/angular.js/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、實(shí)現(xiàn)結(jié)果：
看完上述內(nèi)容，你們對AngularJS中怎么設(shè)置表格樣式有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼