bootstrap——css樣式（三、表格）

1、.table
爲任意 table 標籤添加 .table 類可以爲其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

<table class="table">
  ...
</table>

2、條紋狀表格
通過 .table-striped 類可以給 之內的每一行增加斑馬條紋樣式。

<table class="table table-striped">
  ...
</table>

3、帶邊框的表格

添加 .table-bordered 類爲表格和其中的每個單元格增加邊框。

<table class="table table-bordered">
  ...
</table>

4、鼠標懸停
通過添加 .table-hover 類可以讓 tbody 中的每一行對鼠標懸停狀態作出響應。
就是當鼠標懸停時，這一行變成灰色

<table class="table table-hover">
  ...
</table>

5、緊縮表格
通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。

<table class="table table-condensed">
  ...
</table>

6、狀態類
通過這些狀態類可以爲行或單元格設置顏色。

Class	描述
.active	鼠標懸停在行或單元格上時所設置的顏色
.success	標識成功或積極的動作
.info	標識普通的提示信息或動作
.warning	標識警告或需要用戶注意
.danger	標識危險或潛在的帶來負面影響的動作

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

7、響應式表格
將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Firefox 和 fieldset 元素
Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式，導致響應式表格出現問題。除非使用我們下面提供的針對 Firefox 的 hack 代碼，否則無解：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}