Bootstrap/docs/4.5/content/tables
来自菜鸟教程
使用Bootstrap进行表格选择样式的文档和示例（考虑到它们在JavaScript插件中的普遍使用）。
例子
由于表格在日历和日期选择器等第三方小部件中的广泛使用,因此我们将表格设计为 选择参加 。只需添加基类 .table 去任何 <table> ,然后使用自定义样式或我们包含的各种修饰符类进行扩展。
使用最基本的表格标记,方法如下 .table 基于表的表在Bootstrap中查找。 所有表样式都在Bootstrap 4中继承 ,意味着任何嵌套表的样式都将与父表相同。
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里
鸟
@推特
您还可以使用以下方法反转颜色-在深色背景上使用浅色文字 .table-dark.
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里
鸟
@推特
表头选项
与表和黑表类似,使用修饰符类 .thead-light or .thead-dark 使 <thead> 出现浅灰色或深灰色。
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里
鸟
@推特
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
条纹行
Use .table-striped 将斑马条纹添加到 <tbody>.
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里
鸟
@推特
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里
鸟
@推特
边框表
Add .table-bordered 用于表格和单元格所有侧面的边框。
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
无边桌
Add .table-borderless 一张无边界的桌子
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
.table-borderless 也可以在深色桌子上使用。
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
悬停行
Add .table-hover 在一个表中的表行上启用悬停状态 <tbody>.
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
小桌子
Add .table-sm 通过将单元格填充减半使表格更紧凑。
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里·伯德 | @推特 | |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"> 拉里·伯德 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里·伯德
@推特
上下文类
使用上下文类为表格行或单个单元格上色。
| 类 | 标题 | 标题 |
|---|---|---|
| 活性 | Cell | Cell |
| 默认 | Cell | Cell |
| 主 | Cell | Cell |
| 次要 | Cell | Cell |
| 成功 | Cell | Cell |
| 危险 | Cell | Cell |
| 警告 | Cell | Cell |
| Info | Cell | Cell |
| 光 | Cell | Cell |
| Dark | Cell | Cell |
<table class="table">
<thead>
<tr>
<th scope="col"> 类 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row"> 活性 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row"> 默认 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-primary">
<th scope="row"> 主 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-secondary">
<th scope="row"> 次要 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-success">
<th scope="row"> 成功 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-danger">
<th scope="row"> 危险 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-warning">
<th scope="row"> 警告 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-info">
<th scope="row"> Info </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-light">
<th scope="row"> 光 </th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="table-dark">
<th scope="row"> Dark </th>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>标题
标题
活性
Cell
Cell
默认
Cell
Cell
主
Cell
Cell
次要
Cell
Cell
成功
Cell
Cell
危险
Cell
Cell
警告
Cell
Cell
Info
Cell
Cell
光
Cell
Cell
Dark
Cell
Cell
常规表背景变体不适用于深色表,但是,您可以使用 文字或背景工具 达到相似的风格。
| # | 标题 | 标题 |
|---|---|---|
| 1 | Cell | Cell |
| 2 | Cell | Cell |
| 3 | Cell | Cell |
| 4 | Cell | Cell |
| 5 | Cell | Cell |
| 6 | Cell | Cell |
| 7 | Cell | Cell |
| 8 | Cell | Cell |
| 9 | Cell | Cell |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">2</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">4</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="bg-info">
<th scope="row">5</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">6</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="bg-warning">
<th scope="row">7</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">8</th>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr class="bg-danger">
<th scope="row">9</th>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>标题
标题
1
Cell
Cell
2
Cell
Cell
3
Cell
Cell
4
Cell
Cell
5
Cell
Cell
6
Cell
Cell
7
Cell
Cell
8
Cell
Cell
9
Cell
Cell
向辅助技术传达意义
使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如 可见的文字）,或通过其他方式（例如, .sr-only 类。
通过包装任何内容来创建响应表 .table with .table-responsive{-sm|-md|-lg|-xl} ,使表格在每个位置水平滚动 max-width 断点分别达到（但不包括）576px,768px,992px和1120px。
请注意,由于浏览器当前不支持 范围上下文查询 ,我们致力于解决以下限制 min- and max- 前缀 通过使用精度更高的值进行这些比较,可以创建具有小数宽度的视口（例如,在某些条件下会出现在高dpi的设备上）。
字幕
A<caption> 功能类似于表格的标题。 它可以帮助具有屏幕阅读器的用户查找表格并了解表格的内容,并决定是否要读取表格。
| # | 第一 | Last | 处理 |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | 雅各 | 桑顿 | @fat |
| 3 | 拉里 | 鸟 | @推特 |
<table class="table">
<caption> 用户名单 </caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 第一 </th>
<th scope="col"> Last </th>
<th scope="col"> 处理 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Mark </td>
<td> Otto </td>
<td> @mdo </td>
</tr>
<tr>
<th scope="row">2</th>
<td> 雅各 </td>
<td> 桑顿 </td>
<td> @fat </td>
</tr>
<tr>
<th scope="row">3</th>
<td> 拉里 </td>
<td> 鸟 </td>
<td> @推特 </td>
</tr>
</tbody>
</table>第一
Last
处理
1
Mark
Otto
@mdo
2
雅各
桑顿
@fat
3
拉里
鸟
@推特
响应表
响应式表允许轻松地水平滚动表。 通过包装一个使所有视口都响应的表 .table with .table-responsive 。或者,使用以下命令选择一个最大的断点,以使其具有响应表 .table-responsive{-sm|-md|-lg|-xl}.
垂直裁剪/截断
响应表利用 overflow-y: hidden ,它会剪裁超出表格底部或顶部边缘的所有内容。 特别是,这可以剪切下拉菜单和其他第三方小部件。
始终响应
在每个断点处使用 .table-responsive 用于水平滚动表。
| # | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">2</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">3</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>
</div>标题
标题
标题
标题
标题
标题
标题
标题
标题
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
特定于断点
Use .table-responsive{-sm|-md|-lg|-xl} 根据需要创建直到特定断点的响应表。 从该断点开始,该表将正常运行并且不会水平滚动。
这些表可能会坏掉,直到它们的响应样式应用于特定的视口宽度。
| # | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-sm">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">2</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">3</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>
</div>标题
标题
标题
标题
标题
标题
标题
标题
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
| # | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-md">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">2</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">3</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>
</div>标题
标题
标题
标题
标题
标题
标题
标题
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
| # | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-lg">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">2</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">3</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>
</div>标题
标题
标题
标题
标题
标题
标题
标题
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
| # | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-xl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
<th scope="col"> 标题 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">2</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
<tr>
<th scope="row">3</th>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
<td> Cell </td>
</tr>
</tbody>
</table>
</div>标题
标题
标题
标题
标题
标题
标题
标题
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
