| # | 姓名 | 性别 | 年龄 |
|---|---|---|---|
| 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 |