Bootstrap(五)表格樣式

基礎樣式 .table

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

條紋狀表格 .table-striped

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

條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。

帶邊框的表格 .table-bordered

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

鼠標懸停 .table-hover

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

緊縮表格 .table-condensed

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

行樣式 .active .sucess .info

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>

響應式表格

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

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