3-2 表格

1. 快速產生
   • 在 Visual Studio Code 中輸入b4-table-default按 Enter 可以快速產生表格的語法。
2. 響應式表格

   • <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. 程式碼

   <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>