線上書籍

Home

數位相簿很上手

一、HTML 結構
  1. table
  2. thead、tbody
  3. tr
  4. th、td
  5. colspan(合併欄)、rowspan(合併列)
  6. caption(表格標題)
二、Bootstrap4 表格
  1. .table <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</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>

     

  2. 反轉色彩，使用 .table-dark 在深色背景下放上淺色文本。

  3. 表格 head 選項
    與預設和反轉樣式相似，使用如下兩個 .thead-light 或 .thead-dark 中的一個將 <thead> 顯示淺灰或深灰。

  4. 條紋行
    使用 .table-striped 在 <tbody>中的任何表格行添加斑馬紋

  5. 帶框的表格
    加入 .table-bordered 在表格和儲存格的四邊上添加邊框。

  6. 滑入變色
    添加 .table-hover 以便在一個 <tbody> 中的表格行上啟用一個 hover 狀態。

  7. 小表格
    添加 .table-sm 將儲存格 padding 縮減一半的方式讓表格更加精簡。

  8. 語意化 class
    使用語意化 class 給表格列或單獨的儲存格上色。
     

    <!-- On rows --> <tr class="table-active">...</tr> <tr class="table-primary">...</tr> <tr class="table-secondary">...</tr> <tr class="table-success">...</tr> <tr class="table-danger">...</tr> <tr class="table-warning">...</tr> <tr class="table-info">...</tr> <tr class="table-light">...</tr> <tr class="table-dark">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="table-active">...</td> <td class="table-primary">...</td> <td class="table-secondary">...</td> <td class="table-success">...</td> <td class="table-danger">...</td> <td class="table-warning">...</td> <td class="table-info">...</td> <td class="table-light">...</td> <td class="table-dark">...</td> </tr>

     

  9. 響應式表格
    當表格想要始終呈現水平滾動，可在 .table 上加入 .table-responsive，使 Viewport 符合任何表格。或者 .table 中加 .table-responsive{-sm|-md|-lg|-xl} 創建響應式表格的最大斷點。
     

    <div class="table-responsive-sm"> <table class="table"> ... </table> </div> <div class="table-responsive-md"> <table class="table"> ... </table> </div> <div class="table-responsive-lg"> <table class="table"> ... </table> </div> <div class="table-responsive-xl"> <table class="table"> ... </table> </div>

     

  10. 水平對齊
    .text-center

  11. 垂直對齊
    .align-middle ：http://bootstrap.hexschool.com/docs/4.0/utilities/vertical-align/