bootstrap表格样式

柔光的暖阳◎ 2022-06-09 05:39 286阅读 0赞

1、table-striped：斑马线表格

![845640-20160629160201640-64958532.png][]

2、table-bordered：带边框的表格

![845640-20160629160407499-995343743.png][]

3、table-hover：鼠标悬停高亮的表格

![845640-20160629160436374-1453708994.png][]

4、table-condensed：紧凑型表格(单元格的内距由8px调至5px。)

![845640-20160629160605046-1661490264.png][]

5、table-responsive：响应式表格(当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失)

![845640-20160629160631406-300342809.png][]

6、“.table”主要有三个作用：

给表格设置了margin-bottom:20px以及设置单元内距

在thead底部设置了一个2px的浅灰实线

每个单元格顶部设置了一个1px的浅灰实线

![复制代码][copycode.gif]

<table class="table">
       <thead>
         <tr>
           <th>表格标题</th>
           <th>表格标题</th>
           <th>表格标题</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>表格单元格</td>
           <td>表格单元格</td>
           <td>表格单元格</td>
         </tr>
         <tr>
           <td>表格单元格</td>
           <td>表格单元格</td>
           <td>表格单元格</td>
         </tr>
       </tbody>
     </table>

![复制代码][copycode.gif]

[845640-20160629160201640-64958532.png]: /images/20220609/be921d9904414f9c835ca7597532ac42.png
[845640-20160629160407499-995343743.png]: /images/20220609/7f7d6adf3fde4bda96acfc7eb2c75656.png
[845640-20160629160436374-1453708994.png]: /images/20220609/74f62823fae6407bb2544e773d3ee86f.png
[845640-20160629160605046-1661490264.png]: /images/20220609/4f3b43e375884c3dbaecdfe201bc5454.png
[845640-20160629160631406-300342809.png]: /images/20220609/663c0496b64c484c85486d440ac135c8.png
[copycode.gif]: /images/20220609/85ec8e3e351543c9baf941251c7071c2.png