tnblog
首页
视频
资源
登录

bootstrap表格样式

9297人阅读 2020/7/1 10:32 总访问:457852 评论:1 收藏:0 手机
分类: 前端


1、table-striped:斑马线表格


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


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

前面三种组合在一起大概的代码如下:

  1. <table class="table table-striped table-bordered table-hover">
  2.     <thead>
  3.     <tr>
  4.         <th>Student-ID</th>
  5.         <th>First Name</th>
  6.         <th>Last Name</th>
  7.         <th>Grade</th>
  8.     </tr>
  9.     </thead>
  10.     <tbody>
  11.     <tr>
  12.         <td>001</td>
  13.         <td>Rammohan </td>
  14.         <td>Reddy</td>
  15.         <td>A+</td>
  16.     </tr>
  17.     <tr>
  18.         <td>002</td>
  19.         <td>Smita</td>
  20.         <td>Pallod</td>
  21.         <td>A</td>
  22.     </tr>
  23.     <tr>
  24.         <td>003</td>
  25.         <td>Rabindranath</td>
  26.         <td>Sen</td>
  27.         <td>A+</td>
  28.     </tr>
  29.     </tbody>
  30. </table>



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

也就是现实更紧凑一点了




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





评价
吃亏决不亏,惜福才有福
排名
12
文章
74
粉丝
4
评论
15
ASP.NET中webform中的几个生命周期函数
修心 : 什么周期除了这些还有什么呢
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术