表格 - Tables

默认表格
Bootstrap 默认表格样式
姓名 手机号 出生日期 操作
李白 188-2883-8888 701 年
王安石 166-2663-6666 1021-12-18
杜甫 177-2773-7777 712 年
苏轼 122-2223-2222 1037-1-8
白居易 144-2443-4444 772-2-28
条纹行表格
使用 .table-striped 使得 <tbody> 中的行类似斑马线
姓名 手机号 出生日期 操作
李白 188-2883-8888 701 年
王安石 166-2663-6666 1021-12-18
杜甫 177-2773-7777 712 年
苏轼 122-2223-2222 1037-1-8
白居易 144-2443-4444 772-2-28
紧凑表格
通过 .table-sm 减少单元格的填充
编程语言 评分 变化
Java 15.058% -1.08%
C 14.211% -0.45%
Python 9.260% +2.90%
C++ 6.705% -0.91%
C# 4.365% +0.57%
JavaScript 2.304% -0.53%
PHP 2.167% 0.67%
SQL 1.977% -0.36%
Objective-C 1.686% +0.23%
鼠标悬浮行变色
通过 .table-hover 实现
姓名 手机号 出生日期
李白 188-2883-8888 701 年
王安石 166-2663-6666 1021-12-18
杜甫 177-2773-7777 712 年
苏轼 122-2223-2222 1037-1-8
白居易 144-2443-4444 772-2-28
带边框的表格
通过 .table-bordered 实现
姓名 手机号 出生日期 操作
李白 188-2883-8888 701 年
王安石 166-2663-6666 1021-12-18
杜甫 177-2773-7777 712 年
苏轼 122-2223-2222 1037-1-8
白居易 144-2443-4444 772-2-28
响应式表格
到达断点时添加水平滚动条
# 标题 标题 标题 标题 标题 标题 标题 标题 标题
1 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
2 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
3 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格