本文详解在 Bootstrap（尤其是 v3.x）中实现无边框表格的可靠方法，涵盖内置类使用、CSS 覆盖技巧及常见失效原因，确保即使加载了 bootstrap.min.css 也能完全隐藏所有边框（含表头分隔线、单元格边框等）。
本文详解在 bootstrap（尤其是 v3.x）中实现无边框表格的可靠方法，涵盖内置类使用、css 覆盖技巧及常见失效原因，确保即使加载了 `bootstrap.min.css` 也能完全隐藏所有边框（含表头分隔线、单元格边框等）。
Bootstrap 默认为 .table 类设置了多层边框样式（如 border-top、border-bottom），仅添加 table-borderless 类（Bootstrap 4.3+ 引入）在旧版本（如题中使用的 Bootstrap 3.4.1）中并不生效——这也是用户移除 bootstrap.min.css 后边框消失、但引入后又恢复的根本原因。
✅ 正确解决方案（兼容 Bootstrap 3.x）
Bootstrap 3 并未原生支持 table-borderless，需通过自定义 CSS 强制清除所有边框。推荐以下简洁、高优先级的覆盖规则：
<style>
/* 彻底移除 Bootstrap 3 表格所有边框 */
.table th,
.table td {
border: none !important;
}
.table thead th {
border-bottom: none !important;
}
.table tbody + tbody {
border-top: none !important;
}
</style>
? 关键点说明：
- 使用
!important确保覆盖 Bootstrap 的默认1px solid #ddd；- 同时重置
th和td，避免遗漏表头或数据单元格；- 单独处理
thead th的border-bottom（Bootstrap 3 中该属性独立存在）；- 若表格含多个
<tbody>，需额外清除其间的 <code>border-top。✅ 推荐 HTML 结构优化
在保留语义和响应式能力的前提下，精简冗余属性：
<div class="table-responsive"> <table class="table" style="border-collapse: collapse;"> <!-- 显式声明 collapse 提升渲染一致性 --><thead><tr> <th style="text-align: center;">ID</th> <th style="text-align: center;">Date</th> <th style="text-align: center;">Ref</th> <th style="text-align: center;">Amount</th> <th style="text-align: center;">Income</th> <th style="text-align: center;">Balance</th> </tr></thead> <tbody> <tr> <td style="text-align: center;"><b>433</b></td> <td style="text-align: center;">22-2-2022</td> <td style="text-align: center;">44332</td> <td style="text-align: center;">443</td> <td style="text-align: center;">1111</td> <td style="text-align: center;">899989</td> </tr> <!-- 更多行... --> </tbody> </table> </div>⚠️ 注意事项：
- 避免混用内联
style="border:0"或border="0"属性——Bootstrap 的 CSS 选择器权重更高，此类写法无效；border-collapse: collapse建议显式声明，防止浏览器默认separate模式导致像素级缝隙残留；- 如需保留横向条纹（zebra striping）但去除边框，可叠加
.table-striped类，它仅影响背景色，与边框无关。✅ 升级建议（长期维护）
若项目允许升级，Bootstrap 4.3+ 原生支持
table-borderless类，且无需!important：
此时只需确保 Bootstrap 版本 ≥ 4.3，并移除自定义 CSS 即可。但对存量 Bootstrap 3 项目，上述 CSS 覆盖方案是最稳定、零依赖的解决路径。
