基本示例
| # |
书籍名称 |
作者 |
分类 |
| 1 |
庄子 |
庄子 |
古文典籍 |
| 2 |
道德经 |
老子 |
古文典籍 |
| 3 |
能面杀人事件 |
高木彬光 |
悬疑小说 |
情景状态类
| 书籍名称 |
作者 |
分类 |
| 北京悠悠馆 |
陈舜臣 |
历史小说 |
| 甲午战争 |
陈舜臣 |
历史小说 |
| 神兽之爪 |
陈舜臣 |
历史小说 |
| 帝国的软肋：大汉王朝四百年 |
陈舜臣 |
历史小说 |
| 春秋战国：戈马钟鼓杀与盟 |
陈舜臣 |
历史小说 |
| 龙凤之国 |
陈舜臣 |
历史小说 |
| 大唐帝国之隋乱唐盛三百年 |
陈舜臣 |
历史小说 |
| 一个陌生女人的来信 |
斯蒂芬·茨威格 |
国外名著 |
| 七十二朝人物演义 |
佚名 |
白话小说 |
条纹状表格 .table-striped
| # |
书籍名称 |
作者 |
分类 |
| 1 |
庄子 |
庄子 |
古文典籍 |
| 2 |
道德经 |
老子 |
古文典籍 |
| 3 |
能面杀人事件 |
高木彬光 |
悬疑小说 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
庄子 |
庄子 |
古文典籍 |
| 2 |
道德经 |
老子 |
古文典籍 |
| 3 |
能面杀人事件 |
高木彬光 |
悬疑小说 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
庄子 |
庄子 |
古文典籍 |
| 2 |
道德经 |
老子 |
古文典籍 |
| 3 |
能面杀人事件 |
高木彬光 |
悬疑小说 |
鼠标悬停 .table-hover
添加 .table-hover 可在 <tbody> 中的表行上启用悬停状态。
| # |
书籍名称 |
作者 |
分类 |
| 1 |
理智与情感 |
简·奥斯汀 |
国外名著 |
| 2 |
浪子神鹰 |
陈青云 |
武侠小说 |
| 3 |
风中之路 |
川端康成 |
当代小说 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
理智与情感 |
简·奥斯汀 |
国外名著 |
| 2 |
浪子神鹰 |
陈青云 |
武侠小说 |
| 3 |
风中之路 |
川端康成 |
当代小说 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
理智与情感 |
简·奥斯汀 |
国外名著 |
| 2 |
浪子神鹰 |
陈青云 |
武侠小说 |
| 3 |
风中之路 |
川端康成 |
当代小说 |
状态类
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
表格边框
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
可以使用 border 类定义不同颜色的边框。
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
无边框表格
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
紧缩表格 .table-sm
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
垂直对齐方式
<thead> 的表格单元格始终与底部垂直对齐。<tbody> 中的表格单元格从 <Table> 继承其对齐方式，默认情况下与顶部对齐。使用垂直对齐类在需要时重新对齐。
| 标题一 |
标题二 |
标题三 |
标题四 |
此单元格从表格上继承 vertical-align: middle; 。 |
此单元格从表格上继承 vertical-align: middle; 。 |
此单元格从表格上继承 vertical-align: middle; 。 |
这里是一些占位符文本，旨在占用相当多的垂直空间，以演示垂直对齐在前面的单元格中如何工作。第44回 金毛犼爱财设巧计 山西雁贪功坠牢笼 |
此单元格从表格行上继承 vertical-align: bottom; 。 |
此单元格从表格行上继承 vertical-align: bottom; 。 |
此单元格从表格行上继承 vertical-align: bottom; 。 |
这里是一些占位符文本，旨在占用相当多的垂直空间，以演示垂直对齐在前面的单元格中如何工作。第45回 徐良临险地多亏好友 石仁入贼室搭救宾朋 |
此单元格从表格上继承 vertical-align: middle; 。 |
此单元格从表格上继承 vertical-align: middle; 。 |
这个单元格与顶部对齐。 |
这里是一些占位符文本，旨在占用相当多的垂直空间，以演示垂直对齐在前面的单元格中如何工作。第46回 入破庙人鬼乱闹 奔古寺差解同行 |
嵌套
嵌套表格不会继承边框样式、状态样式和表格情景语境。
| # |
书籍名 |
作者 |
价格 |
| 1 |
论语 |
孔子弟子及再传弟子 |
¥：19.80 |
| # |
书籍名 |
价格 |
| A |
鲁论语 |
¥：19.80 |
| B |
齐论语 |
¥：19.80 |
| C |
古论语 |
¥：19.80 |
|
| 3 |
西厢记 |
王实甫 |
¥：12.00 |
表头
与表和黑色表类似，使用修饰符类 .table-light .table-dark让其显示为浅灰色或黑色。
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 |
烽火戏诸侯 |
玄幻仙侠 |
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 |
烽火戏诸侯 |
玄幻仙侠 |
表脚
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 |
烽火戏诸侯 |
玄幻仙侠 |
| 表脚 |
表脚 |
表脚 |
表脚 |
题注
<caption> 的功能类似于表格的标题。它帮助屏幕阅读器的用户找到一个表格，了解它的内容，并决定他们是否想要阅读它。
书籍清单
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
您还可以使用 .caption-top 将 <caption> 放在表格顶部。
书籍清单
| # |
书籍名称 |
作者 |
分类 |
| 1 |
简单爱 |
董晓磊 |
青春校园 |
| 2 |
主教杀人事件 |
范·达恩 |
悬疑小说 |
| 3 |
天神下凡 · 烽火戏诸侯 |
玄幻仙侠 |
始终响应式的
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |
特定断点
默认
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |
.table-responsive-sm
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |
.table-responsive-md
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |
.table-responsive-lg
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |
.table-responsive-xl
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |
.table-responsive-xxl
| # |
书籍名 |
作者 |
国籍 |
分类 |
库存 |
价格 |
商店 |
折扣 |
是否有赠礼 |
| 1 |
钦差大臣 |
果戈理 |
俄国 |
国外名族 |
125 |
36.00 |
五玉书店 |
9折 |
无 |
| 2 |
西厢记 |
王实甫 |
中国 |
古文典籍 |
26 |
18.00 |
广场书店 |
9.5折 |
有 |
| 3 |
儒林外史 |
吴敬梓 |
中国 |
古文典籍 |
39 |
22.00 |
大点书店 |
8.5折 |
无 |