Skip to content

表格

表格用于展示二维数据。

使用方法

<table> 元素添加 CSS 类 .table 来使用表格。

组成部分元素标签说明
表头<thead>表头通常作为表格第一行,用于展示所有数据的各个属性名称。
主体<tbody>一个或多个行组成表格的主体,每行用于展示一个数据。
表尾<tfoot>表尾通常用于展示一些数据的汇总信息。
总计3 个部分

斑马纹表格

<table class="table"> 上使用工具类 .table-striped 斑马纹表格外观(隔行变色)效果。

:: tabs

== 示例

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

== HTML

html
<table class="table table-striped">
  ...
</table>

:::

鼠标悬停变色

<table class="table"> 上使用工具类 .table-hover,当鼠标悬停在行上时显示不一样的背景。

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

完整边框

<table class="table"> 上使用工具类 .bordered,为表格添加所有边框。

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

无边框

<table class="table"> 上使用工具类 .borderless,为表格移除所有边框。

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

紧凑的表格

<table class="table"> 上使用工具类 .condensed 来获得更紧凑的表格。表格中的单元格拥有更小的间距,整体行高减少。

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

固定布局的表格

<table class="table"> 上使用工具类 .table-fixed 来将表格布局方式设置为 fixed

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观。
3.02021-07-31这一次说说关于表格的固定布局,当启用固定布局时,后续行中的单元格内容将不会对表格布局产生影响,当单元格内的文本过长时会被截断隐藏。

关于表格的固定布局

表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

使用“fixed”布局方式时,整个表格可以在其首行被下载后就被解析和渲染。这样对于“automatic”自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

自动宽度

通常表格宽度为 100%,与表格所属的父级元素宽度保持一致,但有时希望表格的宽度能够按照实际内容宽度展示。此时可以通过配合使用 CSS 工具类 w-auto 来设置表格宽度为自动,同时推荐使用工具类 max-w-full 来限制表格最大宽度不超过父级元素宽度(100%)。

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

特殊外观

为行元素 <tr> 或单元格 <td><th> 应用 CSS 工具类 来获得特殊外观。

版本发布时间主要特性
1.02021-03-01第一个版本发布!
1.12021-04-12修复了大量已知问题。
1.22021-05-18新的编辑器,让创意更容易展现。
2.02021-06-05这次版本带来全新的界面外观
2.12021-07-31新的预览功能,更方便的提前查看最终效果!

CSS 类

按钮提供了如下 CSS 类:

类型作用
table实体类元素作为表格组件
table-striped工具类为表格启用斑马纹效果
table-hover工具类为表格启用行悬停变色效果
table-fixed工具类为表格启用固定布局
borderless工具类移除表格所有边框
bordered工具类为表格添加完整边框
condensed工具类为表格启用紧凑布局

CSS 变量

变量名称变量含义
--table-head-bg表头背景色
--table-striped-color表格斑马纹行背景色
--table-hover-color表格行响应鼠标悬停变化背景颜色
--table-border-color表格边框颜色