Jill 筆記 - 線上書籍

:::

PHP從入門到放棄實戰班
============

1. 快速產生 
  - 在 Visual Studio Code 中輸入`b4-table-default`按 <kbd>Enter</kbd> 可以快速產生表格的語法。
2. 響應式表格 
  - ```markup
      <div class="table-responsive">
        <table class="table">
          ...
        </table>
      </div>
      ```
3. 樣式 
  - 只要在`<table>`中加入 `.table`即可，會變成只有橫向的灰線，無垂直框線。
  - 在`<table>`中加入 `.table-dark` 可以變為深色表格。
  - 在`<thead>`中加入 `.thead-dark` 可以變為深色表格標題，若用`.thead-light`則是淺灰標題。
  - 在`<table>`中加入 `.table-striped` 可以讓表格內容呈現一白一灰的斑馬紋。
  - 在`<table>`中加入 `.table-bordered` 可以讓表格加上框線。
  - 在`<table>`中加入 `.table-hover` 當滑鼠移過表格內容時，會即時改變底色。
  - 在`<table>`中加入 `.table-sm` 更為緊密的表格，看起來比較不那麼胖（BS4新語法）。
4. 程式碼 
  ```markup
  <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-sm">
        <thead  class="thead-dark">
          <tr>
            <th><i class="fas fa-check"></i> 完成</th>
            <th>描述</th>
            <th>到期日</th>
            <th>優先順序</th>
            <th>指派對象</th>
            <th>地點</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>完成</td>
            <td>撰寫程式</td>
            <td>2020/06/08</td>
            <td>低</td>
            <td>李大頭</td>
            <td>研討室</td>
          </tr>
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2020/06/08</td>
            <td>高</td>
            <td>李大頭、主任、XX科</td>
            <td>4F會議室</td>
          </tr>
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2020/06/08</td>
            <td>高</td>
            <td>李大頭、主任、XX科</td>
            <td>4F會議室</td>
          </tr>
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2020/06/08</td>
            <td>高</td>
            <td>李大頭、主任、XX科</td>
            <td>4F會議室</td>
          </tr>
        </tbody>
      </table>
  </div>
  ```

MarkDown