bs4_.table（表格）

Posted 2020-11-26 syinho

目录

• 基础表格——.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>