在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

Semantic-Org/Semantic-UI

菜单

表格集合

相关源文件

目的与范围

Semantic UI 的表格集合提供了一个全面的系统，用于显示具有语义化样式的表格数据。本文档涵盖了 Semantic UI 中表格的结构、变体、状态和响应式行为。

有关表单等其他集合的信息，请参阅 表单集合，有关网格系统的信息，请参阅 网格系统。

表格结构和基本用法

Semantic UI 表格通过额外的样式和功能增强了标准的 HTML 表格标记。最基本的是，使用 .ui.table 类来创建表格。

来源: src/definitions/collections/table.less26-44 src/definitions/collections/table.less50-54

表格的基本样式包括宽度、背景、边距、边框、盒阴影、边框半径、文本对齐和颜色属性。样式通过 LESS 变量实现，以便于主题化。

表格部分

头

表格标题使用 thead 和 th 元素，并通过以下方式使其区别于表格主体：

  • 盒阴影效果
  • 不同的背景颜色
  • 粗体字重
  • 顶部角的适当边框半径
  • 可选的排序功能

来源: src/definitions/collections/table.less57-86

主体和单元格

表格主体包含行（tr）和包含数据内容的单元格（td）。每个单元格具有

  • 标准化的内边距
  • 基于配置的文本对齐
  • 用于分隔行的边框样式

来源: src/definitions/collections/table.less118-134

表格页脚（tfoot）提供了一个用于汇总信息的地方，具有

  • 盒阴影样式
  • 用于与内容分隔的边框样式
  • 与标题不同的字重

来源: src/definitions/collections/table.less89-115

表格类型和变体

Semantic UI 为不同的展示需求提供了多种表格类型

来源: src/definitions/collections/table.less220-298 src/definitions/collections/table.less1001-1055

定义表格

定义表格突出显示第一列，使其成为显示键值对的理想选择

第一列获得特殊的样式，具有

  • 不同的背景颜色
  • 粗体字重
  • 独特的文本颜色
  • 可选的文本转换

来源: src/definitions/collections/table.less250-298

样式变体

斑马纹表格

斑马纹表格为行应用交替的背景颜色，以提高可读性

来源: src/definitions/collections/table.less603-618

单元格表格

单元格表格在所有单元格之间添加边框，以更清晰地分隔数据

来源: src/definitions/collections/table.less1048-1055

带内边距和紧凑型表格

这些变体调整单元格内边距

变体类目的
带内边距.ui.padded.table增加单元格内边距
非常带内边距.ui.very.padded.table进一步增加单元格内边距
紧凑.ui.compact.table减小单元格内边距
非常紧凑.ui.very.compact.table进一步减小单元格内边距

来源: src/definitions/collections/table.less1061-1098

对齐变体

表格支持文本和垂直对齐变体

对齐类效果
左侧.ui.left.aligned.table单元格文本左对齐
中心.ui.center.aligned.table单元格文本居中对齐
右侧.ui.right.aligned.table单元格文本右对齐
顶部.ui.top.aligned.table单元格顶部内容对齐
中间.ui.middle.aligned.table单元格中部内容对齐
底部.ui.bottom.aligned.table单元格底部内容对齐

也可以为单个单元格应用这些对齐类。

来源: src/definitions/collections/table.less440-468

固定和折叠表格

变体类目的
固定.ui.fixed.table使用 table-layout: fixed 来实现一致的列宽和文本截断
折叠.ui.collapsing.table表格宽度根据内容调整，而不是填满容器

来源: src/definitions/collections/table.less474-492 src/definitions/collections/table.less993-995

尺寸变体

表格提供不同的文本大小

大小类效果
小型.ui.small.table较小的文本 (0.9em)
默认.ui.table正常文本 (1em)
大型.ui.large.table较大的文本 (1.1em)

来源: src/definitions/collections/table.less1105-1117 src/themes/default/collections/table.variables245-247

颜色变体

表格可以带有彩色边框或背景

支持的颜色包括：红色、橙色、黄色、橄榄色、绿色、青色、蓝色、紫罗兰色、紫色、粉色、棕色、灰色和黑色。

来源: src/definitions/collections/table.less637-752

表格状态

行和单元格可以有各种状态来指示其状态

使用示例

状态添加适当的背景颜色、文本颜色和盒阴影以指示状态。

来源: src/definitions/collections/table.less304-386

交互功能

可选中的表格

可选中的表格在鼠标悬停时高亮显示行或单元格

单元格也可以单独选择

来源: src/definitions/collections/table.less499-550

可排序表格

可排序表格允许进行列排序，并带有适当的指示符

排序功能提供

  • 标题的悬停状态
  • 排序方向（升序/降序）的视觉指示器
  • 在特定列上禁用排序的能力

来源: src/definitions/collections/table.less879-949

响应式行为

Semantic UI 表格默认是响应式的，在移动断点处进行转换

在堆叠模式下

  • 每行变成一个块
  • 单元格垂直显示，而不是水平显示
  • 第一列通常成为每行的伪标题
  • 盒阴影在视觉上分隔行

来源: src/definitions/collections/table.less157-200 src/definitions/collections/table.less396-434

列规格

Semantic UI 允许指定列数和宽度

列数

支持从一到十六的列数，它们会自动为所有列设置相等的宽度。

来源: src/definitions/collections/table.less760-807

列宽

为了更精细的控制，可以为单个列指定特定的宽度

支持从一到十六个单位的列宽，使用与 Semantic UI 其他组件相同的网格系统。

来源: src/definitions/collections/table.less810-873

附加表格

表格可以附加到其他元素或彼此上

附件变体包括

  • .attached (四周都附加)
  • .top.attached (顶部附加)
  • .bottom.attached (底部附加)

来源: src/definitions/collections/table.less559-596

定制

表格样式可以使用主题系统中定义的变量进行自定义。主变量文件是 src/themes/default/collections/table.variables，其中包含

类别示例变量目的
元素@background, @color, @border基本表格外观
组成部分@cellVerticalPadding, @headerBackground特定部分样式
类型@definitionHeaderBackground, @stripedBackground类型特定外观
状态@positiveColor, @negativeBackgroundHover状态样式和悬停效果
响应式@responsiveRowBoxShadow, @responsiveCellPadding移动设备外观

文件之间的关系如下图所示

来源: src/definitions/collections/table.less11-19 src/themes/default/collections/table.variables1-248

使用示例

带状态的基本表格

复杂的响应式表格

此示例创建一个表格，该表格

  • 单元格之间有边框（celled）
  • 具有交替的行颜色（striped）
  • 在移动设备上不会堆叠（unstackable）
  • 具有一个折叠的第一列
  • 最后一列的内容右对齐
  • 包含页脚分页控件