知識(shí)點(diǎn)
表格樣式
.table -----> 賦予基本的樣式，少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線；
.table-striped -----> 條紋狀表格，可以給 <tbody> 之內(nèi)的每一行增加斑馬條紋樣式；
.table-bordered -----> 帶邊框的表格，為表格和其中的每個(gè)單元格增加邊框；
.table-hover -----> 鼠標(biāo)懸停，讓 <tbody> 中的每一行對(duì)鼠標(biāo)懸停狀態(tài)作出響應(yīng)；
.table-condensed -----> 讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半；
狀態(tài)類
.active -----> 鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色
.success -----> 標(biāo)識(shí)成功或積極的動(dòng)作
.info -----> 標(biāo)識(shí)普通的提示信息或動(dòng)作
.warning -----> 標(biāo)識(shí)警告或需要用戶注意
.danger -----> 標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作
響應(yīng)式表格
將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。
垂直方向的內(nèi)容截?cái)啵?/p>
響應(yīng)式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內(nèi)容截?cái)?。特別是，也可以截?cái)嘞吕藛魏推渌谌浇M件。
Firefox 和 fieldset 元素：
Firefox 瀏覽器對(duì) fieldset 元素設(shè)置了一些影響 width 屬性的樣式，導(dǎo)致響應(yīng)式表格出現(xiàn)問(wèn)題?？梢允褂孟旅嫣峁┑尼槍?duì) Firefox 的 hack 代碼解決，這些代碼并未集成在 Bootstrap 中，我們需要自己添加到自己的代碼中。
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
實(shí)踐
<!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 鼠標(biāo)懸停狀態(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>鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色</td>
</tr>
<tr class="success">
<td>success</td>
<td>標(biāo)識(shí)成功或積極的動(dòng)作</td>
</tr>
<tr class="infor">
<td>infor</td>
<td>標(biāo)識(shí)普通的提示信息或動(dòng)作</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>標(biāo)識(shí)警告或需要用戶注意</td>
</tr>
<tr class="danger">
<td>danger</td>
<td>標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
