<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-8 表格</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- 添加表格线 和 鼠标悬停 使用较多 -->
<!-- 1. 添加表格基本样式 table类 -->
<!-- <table class="table"> -->
<!-- 2. 设置表格隔行变色 -->
<!-- <table class="table table-striped"> -->
<!-- 3. 添加边框 -->
<!-- <table class="table table-striped table-bordered"> -->
<!-- 4. 鼠标悬停响应 -->
<!-- <table class="table table-bordered table-hover"> -->
<!-- 5. 创建紧缩型表格, 将单元格的padding值缩小一半 -->
<!-- <table class="table table-condensed"> -->
<!-- 6. 给某些行添加背景色 - 状态类 -->
<!-- 需要在tr标签上添加类： active， info， danger， success， warning -->
<!-- 7. 创建响应式表格， 当表格显示在小屏幕上时，出现滚动条，显示在大屏幕上时滚动条消失 -->
<!-- 将整个表格包裹在 <div class='table-responsive'></div> 这个容器中 -->
<div class="table-responsive">
<table class="table table-striped">
<caption class="h3 text-center">学生信息表</caption>
<thead>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1001</td><td>郭靖</td><td>男</td><td>20</td>
</tr>
<tr class="info">
<td>1002</td><td>黄蓉</td><td>女</td><td>18</td>
</tr>
<tr class="danger">
<td>1003</td><td>杨康<info/td><td>男</td><td>25</td>
</tr>
<tr class="warning">
<td>1004</td><td>杨过</td><td>男</td><td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
