CSS小知识---table表格

所用的仍是bootstrap的模板

<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

body中的html语句

<div class="table-responsive" style="border:1px solid #ccc;">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>通信1001</td>
<td>41050001</td>
</tr>
<tr>
<td>李四</td>
<td>通信1001</td>
<td>41050002</td>
</tr>
<tr>
<td>王五</td>
<td>通信1001</td>
<td>41050003</td>
</tr>
<tr>
<td>panda</td>
<td>通信1001</td>
<td>41050004</td>
</tr>
</tbody>
</table>
</div>

.table是bootstrap中自带的css样式。对其简单修改如下

.table{margin-bottom: 0px}
.table th {
text-align: center;
color: #ffffff;   /*表头中字体的颜色，白色*/
background-color: #46ABE6; /*表头中的背景颜色，蓝色*/
}
.table td {
text-align: center;
}

.table-responsive是响应式布局，可以让表格水平滚动以适应小型设备

.table-striped是斑马线形式的条纹，可以通过如下语句修改条纹的颜色

/*默认将奇数行设置为浅灰色*/
.table-striped>tbody>tr:nth-of-type(even){background-color:#E9F1F6}   /*偶数行设置为浅蓝色*/

得到的表格样式如下：