Bootstrap 响应式表格

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：响应式表格</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />

</head>
<body>
<div class="table-responsive">

<table class="table table-bordered table-condensed table-hover table-striped">
<caption>Bootstrap响应式表格</caption>
<thead >
<tr class="success">
<th>序号</th><th>课程</th>
</tr>
</thead>
<tbody >
<tr class="active">
<td>1</td>
<td>HTML5</td>
</tr>
<tr class="info">
<td>2</td>
<td>CSS3</td>
</tr>
<tr class="warning">
<td>3</td>
<td>JavaScript</td>
</tr>
<tr class="danger">
<td>4</td>
<td>jQuery</td>
</tr>
<tr>
<td>5</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>6</td>
<td>Aanglur JS</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>

<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>