小见

bootstrap表格样式

电脑版发表于:2020/7/1 10:32


1、table-striped:斑马线表格


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


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

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

<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>



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

也就是现实更紧凑一点了




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





关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢