表格

收藏806

阅读2834

更新时间2025-08-11

基础表格

一个基本的 Bootstrap 5 表格有一点内边距,以及水平分隔线。

.table 类为表格添加了基本样式:

实例

条纹行

.table-striped 类将斑马条纹添加到表中:

实例

带边框的表格

.table-bordered 类为表格和单元格的所有边添加边框:

实例

有悬停效果的行

.table-hover 类在表格行上添加悬停效果(灰色背景色):

实例

黑色/深色表格

.table-dark 类为表格添加黑色背景:

实例

深色条纹表格

结合 .table-dark.table-striped 来创建深色的条纹表格:

实例

可悬停的深色表格

.table-hover 类在表格行上添加悬停效果(灰色背景色):

实例

无边框表格

.table-borderless 类从表格中删除边框:

实例

上下文类

上下文类可用于为整个表格 (

)、表格行 () 或表格单元格 (
) 着色。

实例

可用的上下文类:

描述
.table-primary 蓝色:表示重要动作。
.table-success 绿色:表示成功或积极的动作。
.table-danger 红色:表示危险或潜在的负面行为。
.table-info 浅蓝色:表示中性的信息更改或操作。
.table-warning 橙色:表示可能需要注意的警告。
.table-active 灰色:将悬停颜色应用于表格行或表格单元格。
.table-secondary 灰色:表示不太重要的动作。
.table-light 浅灰色表格或表格行背景。
.table-dark 深灰色表格或表格行背景。

表头颜色

您还可以使用任何上下文类只向表格标题添加背景颜色:

实例

小型表格

.table-sm 类通过将单元格填充减半来使表格变小:

实例

响应式表格

.table-responsive 类在需要时向表格添加滚动条(当它在水平方向上太大时):

实例

...

您还可以决定表格何时应该获得滚动条,具体取决于屏幕宽度:

屏幕宽度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

实例

...

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号