<!-- 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 -->
<!--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 -->
<!--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 -->
<!--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 -->
<!--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 -->
<!--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 -->
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 -->
<!--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 -->
<!--Table9 --> <!-- 响应式表格 表格外层div使用类 table-responsive , 使用该样式时, 表格不可以限定width --> <!-- 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 -->
原文：https://www.cnblogs.com/mkl7/p/10913469.html