Bootstrap笔记3—表格table

最新推荐文章于 2025-06-03 09:10:05 发布

erdouzhang

最新推荐文章于 2025-06-03 09:10:05 发布

阅读量625

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/60870179

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

这篇博客主要介绍了Bootstrap中表格的各种样式，包括基础样式、条纹样式、带边框、鼠标悬停显示灰色背景、紧凑型表格以及响应式表格的实现方法。通过这些样式，可以为表格增添视觉效果并适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格

具体参考Bootstrap中文网手册。

1.基础样式

class="table"

这里写图片描述

<table class="table">
    <tr>
        <th>序号</th><th>姓名</th><th>年龄</th>       
    </tr>
    <tr>
        <td>1</td><td>张三</td><td>18</td>        
    </tr>
    <tr>
        <td>2</td><td>李四</td><td>22</td>        
    </tr>
    <tr>
        <td>3</td><td>王五</td><td>16</td>        
    </tr>
    <tr>
        <td>4</td><td>赵六</td><td>24</td>        
    </tr>
</table>

2.条纹样式

class="table table-striped"

这里写图片描述
代码同基础样式代码一样，只是 class=”table”变为class=”table table-striped”，是在基础样式上添加条纹。

3.带边框

class="table table-bordered"

这里写图片描述

带边框带条纹可以一起使用

class="table table-bordered table-striped"

这里写图片描述

4.鼠标悬停当前行显示灰色背景

class="table table-hover"

鼠标悬停在序号一上，序号一显示灰色背景。
这里写图片描述

5.紧凑型表格

class="table-condensed"

这里写图片描述
　

6.响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
    <table class="table">...</table>
</div>