bs4_.table（表格）

目錄

• 基礎表格——.table
• 條紋表格——.table-striped
• 帶邊框表格——.table-bordered
• 鼠標懸停狀態表格——.table-hover
• 黑色背景表格——.table-dark
• 黑色條紋表格——.table-striped和.table-dark連用
• 五彩斑斕的表格帶鼠標懸停效果

基礎表格——.table

• 對<table&bt;添加.table類即可

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table .table {
  background-color: #fff;
}

條紋表格——.table-striped

• 對<table>標簽添加.table類和.table-striped類即可

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
  /*odd是奇數，even是偶數*/
}

帶邊框表格——.table-bordered

• 對<table>標簽添加.table類和.table-bordered類即可

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

鼠標懸停狀態表格——.table-hover

• .table-hover 類可以為表格的每一行添加鼠標懸停效果（灰色背景）

黑色背景表格——.table-dark

• .table-dark 類可以為表格添加黑色背景
  

黑色條紋表格——.table-striped和.table-dark連用

五彩斑斕的表格帶鼠標懸停效果

 <h3>五彩斑斕的表格帶鼠標懸停效果</h3>
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Default</td>
                  <td>Defaultson</td>
                  <td>[e-mail]</td>
                </tr>      
                <tr class="table-primary">
                  <td>Primary</td>
                  <td>Joe</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-success">
                  <td>Success</td>
                  <td>Doe</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-danger">
                  <td>Danger</td>
                  <td>Moe</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-info">
                  <td>Info</td>
                  <td>Dooley</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-warning">
                  <td>Warning</td>
                  <td>Refs</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-active">
                  <td>Active</td>
                  <td>Activeson</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-secondary">
                  <td>Secondary</td>
                  <td>Secondson</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-light">
                  <td>Light</td>
                  <td>Angie</td>
                  <td>[e-mail]</td>
                </tr>
                <tr class="table-dark text-dark">
                  <td>Dark</td>
                  <td>Bo</td>
                  <td>[e-mail]</td>
                </tr>
              </tbody>
        </table>