logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
Pagination 分页Tag 标签
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Table 表格

用于展示多条结构类似的数据

基础用法

添加.table 类来添加基本的表格样式。使用 thead 和 tbody 来包裹表格的头部和主体内容。使用 th 和 td 来定义表头和表体单元格。

背景色

使用table-* 类来添加不同的背景颜色。

装饰表格

条纹表格

使用 .table-striped 将斑马条纹添加到 tbody 内的任何表格行

条纹列表

使用 .table-striped-columns 将斑马条纹添加到任何表格列。

可悬停的行

添加 .table-hover 以在 <tbody> 内的表行上启用悬停状态。

活动表

通过添加 .table-active 类高亮表格行或单元格。

表格边框

有边框的表格

添加 .table-bordered 作为表格和单元格所有侧面的边框。

通过 .justify-content-center 来居中对齐分页。

无边框的表格

为无边框的表格添加 .table-borderless。

小表格

通过将所有单元 padding 切成两半,添加 .table-sm 以使任何 .table 更加紧凑。

表格组分隔线

格式对齐

<thead> 的表格单元格始终与底部垂直对齐。<tbody> 中的表格单元格继承了 <table> 的对齐方式,并且默认情况下与顶部对齐。

嵌套

嵌套表格不会继承边框样式、活动样式和表格变体。

结构

表格头

与表格和深色表格类似,使用修饰符类 .table-light 或 .table-dark 使 <thead> 显示为浅灰色或深灰色。

表格脚

标题

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

响应式表格

响应式表格允许表格轻松水平滚动。通过用 .table-responsive 封装 .table,使任何表格都能在所有视口中响应。或者,使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 选择一个最大断点,使响应表达到最大断点。

始终响应

在每个断点上,使用 .table-responsive 来水平滚动表。

断点特定

根据需要使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 创建直到特定断点的响应表。从该断点开始,表格将正常运行并且不会水平滚动。

这些表格可能会出现损坏,直到它们的响应样式应用于特定的视口宽度。

table-responsive-sm

table-responsive-md

table-responsive-lg

table-responsive-xl

table-responsive-xxl