# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
Bootstrap Tables
,可前往
查看详细API
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
table
上添加.table-dark
设置深色风格
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
table
上添加.thead-light
或 .thead-dark
设置灰色或深色表头
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
table
上添加.table-sm
设置紧凑表格
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
table
上添加.table-striped
设置条纹效果
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
table
上添加.table-bordered
设置边框
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
table
上添加.table-hover
设置Hover效果
# | 姓名 | 性别 | 年龄 |
---|---|---|---|
1 | 张三 | 男 | 18 |
2 | 李四 | 男 | 19 |
3 | 王五 | 男 | 20 |
# | class | 性别 | 年龄 |
---|---|---|---|
1 | table-active | 男 | 18 |
2 | table-success | 男 | 20 |
3 | table-info | 男 | 20 |
4 | table-warning | 男 | 20 |
5 | table-danger | 男 | 20 |
6 | table-primary | 男 | 19 |
table
上添加.table-responsive
设置表格在小设备(768px以下)下你可以在table
上添加水平滚动
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |