桌子

基本示例

对于基本造型& mdash轻度填充和仅水平分隔& mdash添加基类 。桌子 对任何人 <表格> 。这可能看起来非常多余,但是考虑到表格在其他插件(如日历和日期选择器)中的广泛使用,我们选择隔离我们的自定义表格样式。

# 西方人名的第一个字 用户名
标记 香精油 @mdo
2 雅各 桑顿(姓氏) @胖
3 称量车 这只鸟 @推特

条纹行

使用 。表条纹的 将斑马纹添加到 < tbody >

# 西方人名的第一个字 用户名
标记 香精油 @mdo
2 雅各 桑顿(姓氏) @胖
3 称量车 这只鸟 @推特

带边框的表格

增加 。表格边缘的 表格和单元格各边的边框。

# 西方人名的第一个字 用户名
标记 香精油 @mdo
标记 香精油 @自举
2 雅各 桑顿(姓氏) @胖
3 小鸟拉里 @推特

悬停行

增加 。表格悬停 中的表行上启用悬停状态 < tbody >

# 西方人名的第一个字 用户名
标记 香精油 @mdo
2 雅各 桑顿(姓氏) @胖
3 小鸟拉里 @推特

浓缩表格

增加 。表浓缩的 通过将单元格边距减半来使表格更紧凑。

# 西方人名的第一个字 用户名
标记 香精油 @mdo
2 雅各 桑顿(姓氏) @胖
3 小鸟拉里 @推特

上下文类别

使用上下文类为表格行或单个单元格着色。

班级 描述
。活跃的 将悬停颜色应用于特定行或单元格
。成功 表示成功或积极的行动
。信息 表示中性的信息变化或动作
。警告 表示可能需要注意的警告
。危险 表示危险或潜在的负面行为
# 列标题 列标题 列标题
列内容 列内容 列内容
2 列内容 列内容 列内容
3 列内容 列内容 列内容
列内容 列内容 列内容
5 列内容 列内容 列内容
6 列内容 列内容 列内容
列内容 列内容 列内容
8 列内容 列内容 列内容
9 列内容 列内容 列内容

响应式表格

通过包装任何 。桌子 。表响应的 使它们水平滚动到小设备(低于768像素)。当查看宽度大于768像素的任何内容时,您将看不到这些表格中的任何差异。

# 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
2 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
3 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
# 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
2 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格
3 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格 表格单元格