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}   /*偶数行设置为浅蓝色*/

得到的表格样式如下：