标准表格
表格会自动为移动设备堆叠布局。要禁用此行为，请使用 unstackable 变体或 tablet stackable 以允许对平板电脑进行响应调整。
| 姓名 |
年龄 |
工作 |
|---|
| 詹姆斯 |
24 |
工程师 |
| 吉尔 |
26 |
工程师 |
| 埃莉斯 |
24 |
设计师 |
| 证据等级 |
效果 |
功效 |
共识 |
评论 |
|---|
|
|
功率输出 |
|
80%
18 项研究
|
肌酸补充是提高肌肉肌酸水平的参考化合物；然而，这种增加存在差异，有些人没有反应。 |
|
|
重量 |
|
100%
65 项研究
|
肌酸是提高力量的参考化合物，数字来自一项荟萃分析以评估效力 |
|
|
|---|
| Git 仓库 |
|---|
|
node_modules |
初始提交 |
10 小时前 |
|
test |
初始提交 |
10 小时前 |
|
build |
初始提交 |
10 小时前 |
|
package.json |
初始提交 |
10 小时前 |
|
Gruntfile.js |
初始提交 |
10 小时前 |
表格可以格式化以强调定义行内容的第一列。
定义表格设计为显示在单个背景颜色上。你可以通过更改 @definitionPageBackground 或在第一个单元格上指定背景颜色来调整它。
|
参数 |
描述 |
|---|
| reset rating |
无 |
将评级重置为默认值。 |
| set rating |
rating (整数) |
将当前星级评定设置为指定值。 |
表格可以格式化以显示复杂结构化的数据。
UI 表格使用 border-collapse: separate 以便表格可以接收通常无法应用于表格的样式，例如 border-radius。但是，这可能会导致一些单元格边框在使用 rowspan 或 colspan 的复杂布局以及列数不同的行中出现缺失。
ui structured table 不支持某些样式功能，但可以正确显示所有有效的 HTML 表格内容。
| 姓名 |
类型 |
文件 |
语言 |
| Ruby |
JavaScript |
Python |
| Alpha 团队 |
项目 1 |
2 |
|
|
|
| Beta 团队 |
项目 1 |
52 |
|
|
|
| 项目 2 |
12 |
|
|
|
| 项目 3 |
21 |
|
|
|
单元格或行可以告知用户值是好是坏。
| 姓名 |
状态 |
备注 |
| 未指定姓名 |
未知 |
无 |
| 吉米 |
已批准 |
无 |
| 杰米 |
未知 |
需要电话 |
| 吉尔 |
未知 |
无 |
单元格或行可以提醒用户错误或负值。
| 姓名 |
状态 |
备注 |
| 未指定姓名 |
已批准 |
无 |
| 吉米 |
无法拉取数据 |
无 |
| 杰米 |
已批准 |
分类 |
| 吉尔 |
已批准 |
无 |
单元格或行可以警告用户。
| 姓名 |
状态 |
备注 |
| 未指定姓名 |
未知 |
无 |
| 吉米 |
需要采取行动 |
无 |
| 杰米 |
未知 |
敌对 |
| 吉尔 |
未知 |
无 |
单元格或行可以被用户激活或选择。
| 姓名 |
状态 |
备注 |
| 杰米 |
已批准 |
需要电话 |
| 约翰 |
已选择 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
已批准 |
无 |
单元格可以被禁用。
| 姓名 |
状态 |
备注 |
| 杰米 |
已批准 |
需要电话 |
| 约翰 |
已选择 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
已批准 |
无 |
表格可以指定其单元格内容应保留在一行上，而不是换行。
表格可以使用 table-layout: fixed 一种特殊且更快的表格渲染形式，它不根据内容调整表格单元格大小。
| 姓名 |
状态 |
描述 |
|---|
| 约翰 |
已批准 |
约翰是一个有趣的男孩，但有时你真的没有足够的空间来描述你想描述的一切。 |
| 杰米 |
已批准 |
杰米是一个善良的女孩，但有时你真的没有足够的空间来描述你想描述的一切。 |
| 吉尔 |
拒绝 |
吉尔是一个不错的女孩，但有时你真的没有足够的空间来描述你想描述的一切。 |
固定 single line 表格将自动确保不适合单行的内容将收到 "..." 省略号。
| 姓名 |
状态 |
描述 |
|---|
| 约翰 |
已批准 |
这太长了，我对此表示歉意。 |
| 杰米 |
已批准 |
更简短的描述 |
| 吉尔 |
拒绝 |
更简短的描述 |
表格可以指定如何以响应方式堆叠表格内容。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
表格可以使其行看起来可选择。
| 姓名 |
状态 |
备注 |
| 约翰 |
无操作 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 约翰 |
无操作 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
表格单元格可以被选择。
在可选择单元格内使用 a 链接将自动使点击区域成为整个单元格区域。默认情况下，链接将继承其单元格颜色。
表格标题、行或单元格可以调整其垂直对齐方式。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
备注
1
2
|
| 杰米 |
已批准 |
备注
1
2
|
表格标题、行或单元格可以调整其文本对齐方式。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
表格可以将内容的交替行用更深的颜色条纹化，以增加对比度。
表格可以将每行划分为单独的单元格。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 3 人 |
2 人已批准 |
|
|---|
表格可以降低其复杂性以提高可读性。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
单元格可以折叠，使其仅占用所需的空间。
要确保图标不会换行，你必须在折叠列中最宽的行上或所有行上指定折叠。
|
node_modules |
初始提交 |
10 小时前 |
|
test |
初始提交 |
10 小时前 |
|
build |
初始提交 |
10 小时前 |
表格可以指定其列数以平均分配其内容。
| 姓名 |
状态 |
年龄 |
性别 |
备注 |
|---|
| 约翰 |
已批准 |
22 |
男 |
无 |
| 杰米 |
已批准 |
32 |
男 |
需要电话 |
| 吉尔 |
拒绝 |
22 |
女 |
无 |
| 3 人 |
2 人已批准 |
|
|
|
|---|
表格可以独立指定各个列的宽度。
| 姓名 |
状态 |
|---|
| 约翰 |
已批准 |
| 杰米 |
已批准 |
| 吉尔 |
拒绝 |
| 3 人 |
2 人已批准 |
|---|
表格可以折叠，仅占用其行所需的空间。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 3 人 |
2 人已批准 |
|
|---|
表格可以被赋予颜色以区别于其他表格。
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
表格的颜色可以反转。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 3 人 |
2 人已批准 |
|
|---|
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
| 食物 |
卡路里 |
蛋白质 |
|---|
| 苹果 |
200 |
0g |
| 橙子 |
310 |
0g |
表格可以允许用户通过点击表格标题对内容进行排序。
在
th 元素中添加
ascending 或
descending 类将向用户显示排序方向。本示例使用 kylefox 的
tablesort 插件 的修改版来提供正确的类名。要使可排序表格正常工作，请将
此 JavaScript 包含到您的页面中，并在 DOM 就绪时调用
$('table').tablesort()。
| 姓名 |
状态 |
备注 |
| 约翰 |
无操作 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 3 人 |
2 人已批准 |
|
|---|
定义表格可以具有全宽页眉或页脚，以填充第一列留下的间隙。
有时表格可能需要更多填充以提高可读性。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
他是一个非常友善的人，我很享受和他通电话。我希望我们能再次交谈。 |
| 杰米 |
已批准 |
Jamie 对购买我们的产品不感兴趣。 |
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
他是一个非常友善的人，我很享受和他通电话。我希望我们能再次交谈。 |
| 杰米 |
已批准 |
Jamie 对购买我们的产品不感兴趣。 |
有时表格可能需要更紧凑，以便一次显示更多行。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 姓名 |
状态 |
另一个状态 |
备注 |
|---|
| 约翰 |
已批准 |
已批准 |
无 |
| 杰米 |
已批准 |
已批准 |
需要电话 |
| 约翰 |
已批准 |
已批准 |
无 |
| 杰米 |
已批准 |
已批准 |
需要电话 |
| 约翰 |
已批准 |
已批准 |
无 |
| 杰米 |
已批准 |
已批准 |
需要电话 |
| 约翰 |
已批准 |
已批准 |
无 |
| 杰米 |
已批准 |
已批准 |
需要电话 |
表格也可以是小的或大的。
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 3 人 |
2 人已批准 |
|
|---|
| 姓名 |
状态 |
备注 |
| 约翰 |
已批准 |
无 |
| 杰米 |
已批准 |
需要电话 |
| 吉尔 |
拒绝 |
无 |
| 3 人 |
2 人已批准 |
|
|---|
