关于bootstrap--表格（table的各类样式）

关于bootstrap--表格（table的各类样式）

 

一、table-striped：斑马线表格

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

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

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

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

六、“.table”主要有三个做用：

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

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

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

<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>