知識點
表格樣式
.table -----> 賦予基本的樣式怀跛，少量的內補（padding）和水平方向的分隔線盘榨；
.table-striped -----> 條紋狀表格，可以給 <tbody> 之內的每一行增加斑馬條紋樣式；
.table-bordered -----> 帶邊框的表格筷黔，為表格和其中的每個單元格增加邊框；
.table-hover -----> 鼠標懸停变逃，讓 <tbody> 中的每一行對鼠標懸停狀態(tài)作出響應必逆；
.table-condensed -----> 讓表格更加緊湊，單元格中的內補（padding）均會減半揽乱；
狀態(tài)類
.active -----> 鼠標懸停在行或單元格上時所設置的顏色
.success -----> 標識成功或積極的動作
.info -----> 標識普通的提示信息或動作
.warning -----> 標識警告或需要用戶注意
.danger -----> 標識危險或潛在的帶來負面影響的動作
響應式表格
將任何 .table 元素包裹在 .table-responsive 元素內名眉，即可創(chuàng)建響應式表格，其會在小屏幕設備上（小于768px）水平滾動凰棉。當屏幕大于 768px 寬度時损拢，水平滾動條消失。
垂直方向的內容截斷：
響應式表格使用了 overflow-y: hidden 屬性撒犀，這樣就能將超出表格底部和頂部的內容截斷福压。特別是，也可以截斷下拉菜單和其他第三方組件或舞。
Firefox 和 fieldset 元素：
Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式荆姆，導致響應式表格出現問題∮车剩可以使用下面提供的針對 Firefox 的 hack 代碼解決胆筒，這些代碼并未集成在 Bootstrap 中，我們需要自己添加到自己的代碼中诈豌。
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
實踐
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>表格</title>
<meta name="Resource-type" content="Document" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.example-padding p{padding:15px;}
-->
</style>
</head>
<body>
<div class="container example-padding table-responsive">
<p class="bg-primary">基本表格樣式</p>
<table class="table">
<thead>
<tr>
<th colspan="2">.table 基本表格樣式</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">.table .table-striped 條紋狀表格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">.table .table-bordered 帶邊框的表格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-hover">
<thead>
<tr>
<th colspan="2">.table .table-hover 鼠標懸停狀態(tài)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-condensed">
<thead>
<tr>
<th colspan="2">.table .table-condensed 表格更緊湊仆救，padding減半</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th colspan="2">所有樣式集合</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<p class="bg-primary">狀態(tài)類</p>
<table class="table">
<tbody>
<tr class="active">
<td>active</td>
<td>鼠標懸停在行或單元格上時所設置的顏色</td>
</tr>
<tr class="success">
<td>success</td>
<td>標識成功或積極的動作</td>
</tr>
<tr class="infor">
<td>infor</td>
<td>標識普通的提示信息或動作</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>標識警告或需要用戶注意</td>
</tr>
<tr class="danger">
<td>danger</td>
<td>標識危險或潛在的帶來負面影響的動作</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
