Bootstrap表格 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　表格是Bootstrap的一個基礎組件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。在使用Bootstrap的表格過程中，只需要添加對應的類名就可以得到不同的表格風格，本文將詳細介紹Boostrap表格

基本實例

　　Boostrap將表格<table>的樣式重置如下

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

<table>
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

　　為任意<table>標簽添加.table類可以為其賦予基本的樣式—少量的內邊距(padding)和水平方向的分隔線

　　“.table”主要有三個作用：

　　☑ 給表格設置了margin-bottom:20px以及設置單元內距

　　☑ 在thead底部設置了一個2px的淺灰實線

　　☑ 每個單元格頂部設置了一個1px的淺灰實線

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

條紋狀表格

　　有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果并不困難，只需要在<table class="table">的基礎上增加類名“.table-striped”即可

　　通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色

　　[注意]條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被IE8-支持

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

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

帶邊框表格

　　基礎表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框

　　Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可

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

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

鼠標懸停

　　當鼠標懸停在表格的行上面有一個高亮的背景色，這樣可以時刻告訴用戶正在閱讀表格哪一行的數據

　　通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應

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

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

緊縮表格

　　緊湊型表格，或者叫緊縮表格，簡單理解，就是單元格沒內邊距或者內邊距較其他表格的內邊距更小。換句話說，要實現緊湊型表格只需要重置表格單元格的內邊距padding的值

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

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

狀態類

　　通過這些狀態類可以為行或單元格設置顏色

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

響應式表格

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

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>