Bootstrap原生.table类可快速构建美观表格，组合修饰类（如.table-striped、.table-hover）提升专业性，响应式用.table-responsive包裹，进阶功能需Bootstrap Table插件支持排序分页等。
直接用 Bootstrap 的 .table 类就能快速构建基础美观的表格，不需要额外插件。真正让表格“专业”起来的，是组合使用 Bootstrap 自带的修饰类 + 合理结构 + 可选的 Bootstrap Table 插件（按需增强）。
基础表格：用好 Bootstrap 原生 class
Bootstrap 5（或 4）已内置一整套语义清晰、响应式友好的表格样式类，无需写 CSS 就能获得良好视觉效果：
-
.table：必加，提供基础边框、间距和字体样式 -
.table-striped：自动为<tbody> 中的奇数行添加浅灰背景，提升可读性<li> <strong><code>.table-hover：鼠标悬停时高亮当前行 -
.table-bordered：给所有单元格加边框（适合数据密集型表格） -
.table-sm：减小内边距，让表格更紧凑 -
.table-dark：深色背景配浅色文字，适合暗色主题界面
示例结构简洁明了：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">用户 ID</th>
<th scope="col">姓名</th>
<th scope="col">邮箱</th>
<th scope="col">状态</th>
</tr>
</thead>
<tbody>
<tr><td>101</td><td>张三</td><td>zhang@example.com</td><td>启用</td></tr>
<tr><td>102</td><td>李四</td><td>li@example.com</td><td>禁用</td></tr>
</tbody>
</table>响应式处理：让表格在小屏上不溢出
移动端查看宽表格容易横向滚动困难。Bootstrap 提供了简单可靠的方案：
立即学习“前端免费学习笔记（深入）”；
- 包裹一层
<div class="table-responsive">，它会在小屏下自动启用横向滚动条<li>这个容器对 <code><table> 是透明的，不影响内部样式，但解决了溢出问题<li>无需 JS，纯 CSS 实现，兼容性好</li> <p>用法就是在外层加个 div：</p><pre class='brush:php;toolbar:false;'><div class="table-responsive"> <table class="table table-striped"> <!-- 表头和内容同上 --> </table> </div></pre><h3>进阶交互：用 Bootstrap Table 插件补足功能</h3> <p>如果需要排序、分页、搜索、导出等能力，原生 Bootstrap 表格不支持——这时引入 <strong>Bootstrap Table</strong>（独立 jQuery 插件）最合适：</p> <ul> <li>只需引入它的 CSS 和 JS（以及 jQuery 和 Bootstrap JS），不破坏现有样式体系</li> <li>支持两种初始化方式：纯 HTML 属性配置（适合静态数据），或 JS 初始化（适合动态加载）</li> <li>关键配置示例：<code>data-search="true"开启顶部搜索框；data-pagination="true"启用分页；data-sortable="true"让列标题可点击排序 - 中文支持只需额外引入
bootstrap-table-zh-CN.min.js
最简 HTML 方式（数据写在页面里）：
<table
data-toggle="table"
data-search="true"
data-pagination="true"
data-sortable="true"
class="table table-striped">
<thead><tr><th data-field="id">ID</th><th data-field="name">姓名</th></tr></thead>
<tbody>
<tr><td>1</td><td>王五</td></tr>
</tbody>
</table>实用细节与避坑提醒
实际开发中几个容易忽略但影响体验的点：
- 表头必须用
<th>，且加 <code>scope="col"，这是语义化和无障碍访问的基础- 避免给
<table> 直接设固定宽度，优先靠 Bootstrap 的响应式类和容器控制布局<li>如需固定表头，Bootstrap 原生不支持，需用 Bootstrap Table 的 <code>data-fixed-columns或 CSS sticky（注意兼容性）- 数据量大时，推荐用 Bootstrap Table 的服务端分页（
sidePagination: "server"），避免一次性加载全部数据不复杂但容易忽略
- 避免给
