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

bootstrap 3 之 表格(table的各种样式)

时间:2019-04-13 13:49:14      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:技术   strong   tab   The   tom   info   鼠标   图片   滚动条   

1、table-striped:斑马线表格

技术图片

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

技术图片

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

技术图片

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

技术图片

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

技术图片

6、“.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>

 

bootstrap 3 之 表格(table的各种样式)

标签:技术   strong   tab   The   tom   info   鼠标   图片   滚动条   

原文地址:https://www.cnblogs.com/anyiz/p/10700745.html

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