Bootstrap 表格
由于表格在日历和日期选择器等第三方小部件中的广泛使用，我们设计的表格是可选择的。
只需将基类添加.table到任何基类<table>，然后使用自定义样式或我们的各种包含的修饰符类进行扩展。
使用最基本的表标记，这里是.table基于Bootstrap的基于表的方式。
所有表格样式都在Bootstrap 4中继承，这意味着任何嵌套表格的样式都与父表格相同
表基类 .table
<!-- Table1 --> <div class="table1" style="width:300px;"> <table class="table"> <!-- 表头 --> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table1 -->
浅色背景翻转 即暗色背景 .table-dark
使用浅色背景上的浅色文本反转颜色.table-dark
<!--Table2 --> <!-- 您还可以使用浅色背景上的浅色文本反转颜色.table-dark --> <br><br> <div class="table2" style="width:300px;"> <table class="table table-dark"> <!-- 表头 --> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table2 -->
表头选项 .thead-light或.thead-dark 使thead显示为浅灰色或深灰色. 在thead标签上使用
<!--Table3 --> <!-- 表头选项 与表格和暗表类似，使用修饰符类.thead-light或.thead-dark使<thead>显示为浅灰色或深灰色 --> <br><br> <div class="table3" style="width:300px;"> <table class="table"> <!-- 表头 --> <!-- 暗色表头 --> <!-- <thead class="thead-dark"> --> <!-- 灰色表头 --> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table3 -->
行条纹 使用 .table-striped 斑马条纹
<!--Table4 --> <!-- 条纹的行 使用.table-striped 斑马条纹 添加到任何表--> <br><br> <div class="table4" style="width:300px;"> <table class="table table-striped"> <!-- 表头 --> <!-- 暗色表头 --> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table4 -->
表边界 .table-bordered在表格和单元格的所有边上添加边框
<!--Table5 --> <!-- 表边界 .table-bordered在表格和单元格的所有边上添加边框。 --> <br><br> <div class="table5" style="width:300px;"> <table class="table table-striped table-bordered"> <!-- 表头 --> <!-- 暗色表头 --> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table5 -->
Hoverable rows 鼠标悬停 突出该行 添加 .table-hover 以在表行上启用悬停状态
<!--Table6 --> <!-- Hoverable rows 鼠标悬停 突出该行 添加.table-hover以在表行上启用悬停状态--> <br><br> <div class="table6" style="width:300px;"> <table class="table table-bordered table-hover"> <!-- 表头 --> <!-- 暗色表头 --> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table6 -->
Small table .table-sm 使表更加紧凑
Add .table-sm to make tables more compact by cutting cell padding in half.
添加 .table-sm 通过切割单元格的一半的padding 使表更加紧凑
<!--Table7 --> <!-- Small table Add .table-sm to make tables more compact by cutting cell padding in half. 添加 .table-sm 通过切割单元格的一半的padding 使表更加紧凑 --> <br><br> <div class="table7" style="width:300px;"> <table class="table table-bordered table-hover table-sm"> <!-- 表头 --> <!-- 暗色表头 --> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table7 -->
caption标签 表标题
<!--Table8 --> <!-- caption标签 表标题 --> <br><br> <div class="table8" style="width:300px;"> <table class="table table-striped table-bordered"> <caption>List of users</caption> <!-- 表头 --> <!-- 暗色表头 --> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table8 -->
响应式表格 .table-responsive
表格外层div使用修饰类 .table-responsive
<!--Table9 --> <!-- 响应式表格 表格外层div使用类 table-responsive --> <!-- Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}. --> <br><br> <div class="table9 table-responsive"> <table class="table table-bordered table-hover"> <caption>响应式表格</caption> <!-- 表头 --> <!-- 暗色表头 --> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!--end Table9 -->
