表格
表格用于展示二维数据。
使用方法
为 <table>
元素添加 CSS 类 .table
来使用表格。
组成部分 | 元素标签 | 说明 |
---|---|---|
表头 | <thead> | 表头通常作为表格第一行,用于展示所有数据的各个属性名称。 |
主体 | <tbody> | 一个或多个行组成表格的主体,每行用于展示一个数据。 |
表尾 | <tfoot> | 表尾通常用于展示一些数据的汇总信息。 |
总计 | 3 个部分 |
斑马纹表格
在 <table class="table">
上使用工具类 .table-striped
斑马纹表格外观(隔行变色)效果。
:: tabs
== 示例
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-07-31 | 新的预览功能,更方便的提前查看最终效果! |
== HTML
<table class="table table-striped">
...
</table>
:::
鼠标悬停变色
在 <table class="table">
上使用工具类 .table-hover
,当鼠标悬停在行上时显示不一样的背景。
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-07-31 | 新的预览功能,更方便的提前查看最终效果! |
完整边框
在 <table class="table">
上使用工具类 .bordered
,为表格添加所有边框。
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-07-31 | 新的预览功能,更方便的提前查看最终效果! |
无边框
在 <table class="table">
上使用工具类 .borderless
,为表格移除所有边框。
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-07-31 | 新的预览功能,更方便的提前查看最终效果! |
紧凑的表格
在 <table class="table">
上使用工具类 .condensed
来获得更紧凑的表格。表格中的单元格拥有更小的间距,整体行高减少。
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-07-31 | 新的预览功能,更方便的提前查看最终效果! |
固定布局的表格
在 <table class="table">
上使用工具类 .table-fixed
来将表格布局方式设置为 fixed
。
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观。 |
3.0 | 2021-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.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-07-31 | 新的预览功能,更方便的提前查看最终效果! |
特殊外观
为行元素 <tr>
或单元格 <td>
、<th>
应用 CSS 工具类 来获得特殊外观。
版本 | 发布时间 | 主要特性 |
---|---|---|
1.0 | 2021-03-01 | 第一个版本发布! |
1.1 | 2021-04-12 | 修复了大量已知问题。 |
1.2 | 2021-05-18 | 新的编辑器,让创意更容易展现。 |
2.0 | 2021-06-05 | 这次版本带来全新的界面外观 |
2.1 | 2021-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 | 表格边框颜色 |