Bootstrap5 表格讲解

已于 2022-06-03 09:49:27 修改
阅读量2k 收藏 16
点赞数 3
分类专栏： Bootstrap5 文章标签： bootstrap 前端 html
于 2022-06-02 18:27:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65552364/article/details/125103429
版权

在bootstrap5中，通过类 .table 来设置基础表格的样式，而Bootstrap 中不会继承所有表样式，这意味着任何嵌套表都可以独立于父表进行样式设置，例如合并表格等等...

目录

一、基础表格

二、表格颜色

三、活动类表格

四、条纹表格

五、带边框表格

六、无边框表格

七、响应式表格

一、基础表格

 对于这个基础表格的写法，想必大家也非常熟悉，我们来看一下代码吧

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

而类.table为我们很好的修改了表格的样式，例如默认宽度为100%，内容之间的间距及底部边框，使我们在创建表格的时候更加方便

二、表格颜色

在bootstrap5中设置了8种颜色样式，图中英文即为设置该种颜色所需要的类名

 通过指定意义的颜色类名可以为表格的行或者单元格设置颜色

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-light">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>

‎使用颜色来增加意义只能提供视觉指示，而不会传达给辅助技术（如屏幕阅读器）的用户。确保用颜色表示的信息要么从内容本身（例如可见文本）中显而易见，要么通过替代方式（例如类 .visually-hidden 中隐藏的附加文本）包含在内。

  通过指定意义的颜色类名还可以为整个表格添加颜色样式

<table class="table table-striped table-info">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
</table>

<table class="table table-striped table-warning">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
</table>

 通过指定意义的颜色类名还可以为表头、表注添加颜色样式

<table class="table">
    <thead class="table-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-bordered align-top">
    <thead class="table-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
	<tfoot class="table-dark">
	  	<td>foot</td>
        <td>foot</td>
		<td>foot</td>
	</tfoot>
  </table>

关于表格的说明内容

标签‎<caption>类似于表的标题。它可以帮助使用屏幕阅读器的用户查找表格并了解其内容，并决定是否要阅读它。

<table class="table">
	<caption>List of users</caption>
    <thead class="table-dark">
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr>
        ...
	  </tr>
    </tbody>
  </table>

也可以在标签<caption> 中添加类 .caption-top 将说明内容放到表格上方

<table class="table">
	<caption class="caption-top">List of users</caption>
    <thead class="table-dark">
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr>
        ...
	  </tr>
    </tbody>
  </table>

  三、活动类表格

通过添加类 ‎.table-active 来突出显示表格行或单元格。

 <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>  
      <tr class="table-active">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr>
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td colspan="2" class="table-active">Danger</td>
        <td>mary@example.com</td>
      </tr>
    </tbody>
  </table>

四、条纹表格

通过添加 .table-striped 类，可在 <tbody> 内的行上看到条纹，即在基础表格的代码上为标签<table> 添加 .table-striped 类

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

五、带边框表格

通过添加 .table-bordered 类可以为‎表格和单元格所有边添加边框‎

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

通过指定意义的颜色类名还可以为边框添加颜色样式 效果如下图：

类名书写格式：.border-* （*号为颜色类名） 该类名应添加到标签 <table> 上

六、无边框表格

通过添加 .table-borderless 类可以取消‎表格和单元格所有边的边框‎

<table class="table table-borderless">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>

七、响应式表格

类.table-responsive 用于创建响应式表格，‎在每个断点上，生成水平滚动条。‎根据需要创建响应式表，直至特定断点。从该断点开始，表将正常运行，不会水平滚动。‎

格式：‎.table-responsive{-sm|-md|-lg|-xl|-xxl}

<div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
  </div>

若没有添加断点，则在表格装不下内容后出现滚动条

 关于断点，在这里就不一一展示了，可以复制上一代码前往编译器尝试，谢谢大家的阅读

酷盖带你玩前端
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap Table对前台页面表格的支持实例讲解
10-20
bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css，下面通过本文给大家详细介绍需要引入的文件，对bootstrap table 表格感兴趣的朋友一起看看吧
Bootstrap学习记录【5】【表格】
qq_41670382的博客
03-03 257
Bootstrap学习记录【5】 1.table标签中的表格样式 （1）.table：基础表格 （2）.table-striped：斑马线表格（灰色和白色交替） （3）.table-bordered：带边框的表格 （4）.table-hover：鼠标悬停高亮的表格（一整行） （5）.table-condensed：紧凑型表格（行与行之间紧凑） <table class="table table-bordered table-striped table-hover"> <tr>
Bootstrap Table数据表格的使用指南，作为一个Java程序员
最新发布
m0_60388117的博客
03-22 398
其实关于Kafka，能问的问题实在是太多了，扒了几天，最终筛选出44问：基础篇17问、进阶篇15问、高级篇12问，个个直戳痛点，不知道如果你不着急看答案，又能答出几个呢？若是对Kafka的知识还回忆不起来，不妨先看我手绘的知识总结脑图（xmind不能上传，文章里用的是图片版）进行整体架构的梳理梳理了知识，刷完了面试，如若你还想进一步的深入学习解读kafka以及源码，那么接下来的这份《手写“kafka”》将会是个不错的选择。Kafka入门为什么选择KafkaKafka的安装、管理和配置。
Bootstrap每天必学之表格
01-19
本文主要讲解的是表格，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的各种列表的展示，有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下，Bootstrap已经为我们准备那些类型的表格呢？如下所示： 1.基本案例 2.条纹状表格 3.带边框的表格 4.鼠标悬停 5.紧缩表格 6.状态class 7.响应式表格 8.总结 基本案例  为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所
bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)
12-13
前言 本文主要讲解的是表格，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的各种列表的展示，有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下，Bootstrap已经为我们准备那些类型的表格呢？如下所示： 1.基本案例 2.条纹状表格 3.带边框的表格 4.鼠标悬停 5.紧缩表格 6.状态class 7.响应式表格 8.总结 基本案例 为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所
固定table的thead表头
11-11
固定table的thead表头
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 9167
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
学习 Bootstrap 5 之 Tables
qq_37354060的博客
01-16 1589
学习 Bootstrap 5 之 表格表格 (Tables)1. 创建表格(1). 使用原生的表格标签(2). 使用Bootstrap 5 的提供的表格标签类(3). 原生与Bootstrap创建出来的表格的对比2. 表格样式(1). 表格样式的效果(2). 表格样式的使用1). 用于 <table> 标签2). 用于 <thead> <tbody> <tfoot> 标签 表格 (Tables) 1. 创建表格 (1). 使用原生的表格标签 <tabl
Bootstrap5 表格
qq_44174346的博客
07-28 180
=""
Bootstrap 5-表格
m0_73839298的博客
09-16 232
特征：表格添加滚动条（当它在水平方向上太大时，达到一定数量时才会出现滚动条，35个th或35td就会出现滚动条)• table-secondary （不太重要的动作，灰色)• table-active（将悬停颜色，行/列均可以，灰色)• table-light （浅灰色表格或表格行背景)• table table-bordered（带边框的表格）• table-dark （深灰色表格或表格行背景)• table-hover（表格有悬停效果的行）• table-striped（表格条纹行）
bootstrap表格分页实例讲解
08-31
主要为大家详细介绍了bootstrap表格分页实例讲解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap系列-5.BooStrap表格
cdc8596的博客
08-24 280
bootstrap系列讲解
Bootstrap（二）
weixin_55685975的博客
04-23 1170
表格 基础表格       .table 类来设置基础表格的样式 条纹表格       .table-striped 类，<tbody>内的行上添加条纹 带边框表格       .table-bordered 类可以为表格添加边框 鼠标悬停状态表格      &nbsp
在flask中，用bootstrap5对表单进行渲染。一个简单的示例
liangbilin的博客
06-14 510
参考链接：https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-form 2. 基于wtf，做一个Form 其实就是继承类，然后创建字段。 3. 做一个视图函数，并将 Form 传入模板 4. 模板 注意看，下面这个模板，有几点： 来看看实际效果
自学bootstrap5—表格
wseeyouagain的博客
11-11 450
表格 <!DOCTYPE html> <html> <head> <!-- <meta name="viewport" content="width=device-width,initial-scale=1"> --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" /> <meta charset="utf-8">
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 1851
WEB前端网页设计-Bootstrap5 表格
Day-5 bootstrap 表格
May21☀️
10-13 126
表格1. 基础表格（.table）2. 条纹表格（.table-striped）3. 带边框表格（.table-bordered）4. 鼠标悬停状态表格（.table-hover）5. 带有背景颜色的表格（.table-颜色）6. 带有背景颜色的条纹表格(.table-颜色 .table-striped)7. 带有背景颜色的鼠标悬停效果表格(.table-颜色 .table-hover)8. 指定意义的颜色类9. 表头颜色(.thead-dark / .thead-light)二级目录三级目录 1. 基础
手写bootstrap的表格样式
08-09
手写Bootstrap的表格样式可以通过以下步骤实现： 第一步是引入Bootstrap的CSS文件。在HTML文档的`<head>`标签内添加以下代码： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/css/bootstrap.min.css"> ``` 第二步是创建一个包含表格的HTML元素。可以使用`<table>`标签创建一个表格，并添加`table`和`table-striped`类来应用Bootstrap的表格样式。例如： ```html <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </tbody> </table> ``` 在上述代码中，`<thead>`标签用于定义表格的表头，`<tbody>`标签用于定义表格的内容。每行的数据使用`<tr>`标签定义，每列使用`<td>`标签定义。 第三步是设置表格样式。Bootstrap提供了多个类来设置表格的样式，如`table-striped`用于斑马线效果，`table-bordered`用于边框样式，`table-hover`用于鼠标悬浮样式等。可以根据需要添加或删除这些类来自定义表格的样式。 以上就是手写Bootstrap的表格样式的简单步骤，通过引入Bootstrap的CSS文件，并设置相关的类，就能实现漂亮的表格样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值