<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 表格案列 条纹状表格为类table-striped，table-bordered为表格添加边框
table-condensed表示紧缩表格-->
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<caption>表格标题</caption>
<thead>
<tr class="active">
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Your Name</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>111</td>
<td>mark</td>
<td>jack</td>
<td>cccc</td>
</tr>
<tr class="info">
<td>2222</td>
<td>mark</td>
<td>jack</td>
<td>cccc</td>
</tr>
<tr class="info">
<td>3333</td>
<td>mark</td>
<td>jack</td>
<td>cccc</td>
</tr>
</tbody>
</table>
</div>
<!-- 实现表格的自适应只需要添加包含table类的table-responsive类即可！ -->
</body>
</html>
