码迷,mamicode.com
首页 > 其他好文 > 详细

bs4_.table(表格)

时间:2020-03-06 12:50:40      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:strip   str   inf   灰色   pad   toc   amp   ica   last   

基础表格——.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>def@somemail.com</td>
                </tr>      
                <tr class="table-primary">
                  <td>Primary</td>
                  <td>Joe</td>
                  <td>joe@example.com</td>
                </tr>
                <tr class="table-success">
                  <td>Success</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr class="table-danger">
                  <td>Danger</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr class="table-info">
                  <td>Info</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
                <tr class="table-warning">
                  <td>Warning</td>
                  <td>Refs</td>
                  <td>bo@example.com</td>
                </tr>
                <tr class="table-active">
                  <td>Active</td>
                  <td>Activeson</td>
                  <td>act@example.com</td>
                </tr>
                <tr class="table-secondary">
                  <td>Secondary</td>
                  <td>Secondson</td>
                  <td>sec@example.com</td>
                </tr>
                <tr class="table-light">
                  <td>Light</td>
                  <td>Angie</td>
                  <td>angie@example.com</td>
                </tr>
                <tr class="table-dark text-dark">
                  <td>Dark</td>
                  <td>Bo</td>
                  <td>bo@example.com</td>
                </tr>
              </tbody>
        </table>

bs4_.table(表格)

标签:strip   str   inf   灰色   pad   toc   amp   ica   last   

原文地址:https://www.cnblogs.com/Syinho/p/12391088.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!