Bootstrap 表格去除边框的完整解决方案

本文详解如何在 Bootstrap 框架下彻底移除表格（table）的默认边框，包括使用内置类、自定义 CSS 覆盖及兼容性注意事项，确保在引入 bootstrap.min.css 的前提下仍能实现无边框视觉效果。

本文详解如何在 Bootstrap 框架下彻底移除表格（table）的默认边框，包括使用内置类、自定义 CSS 覆盖及兼容性注意事项，确保在引入 bootstrap.min.css 的前提下仍能实现无边框视觉效果。

在 Bootstrap 中，即使使用了 .table-borderless 类，部分边框（尤其是 border-top 和 thead 底边）仍可能残留——这是因为 Bootstrap 3.x（如示例中的 v3.4.1）对表格单元格设置了带透明度的 rgba(221, 221, 221, 0.1) 边框，而 rgba(..., 0) 并非完全可靠的“无边框”声明（尤其在旧版浏览器中），且 !important 未覆盖所有边界场景。

推荐方案：组合使用 Bootstrap 内置类 + 精准 CSS 覆盖

Bootstrap 3.4+ 已提供 .table-borderless 类，但需配合额外样式才能彻底清除：

<!-- 引入 Bootstrap CSS（必须保留） --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><!-- 表格结构（精简优化） --><div class="table-responsive"><table class="table table-borderless"><thead><tr><th class="text-center">ID</th><th class="text-center">Date</th><th class="text-center">Ref</th><th class="text-center">Amount</th><th class="text-center">Income</th><th class="text-center">Balance</th></tr></thead><tbody><tr><td class="text-center"><strong>433</strong></td><td class="text-center">22-2-2024</td><td class="text-center">44332</td><td class="text-center">443</td><td class="text-center">1111</td><td class="text-center">899989</td></tr><!-- 更多行... --></tbody></table></div>

? 关键 CSS 覆盖（必须添加在 bootstrap.min.css 之后）：

<style>/* 彻底清除所有表格边框（含 thead/th、tbody/td、tfoot） */.table-borderless,.table-borderless > thead > tr > th,.table-borderless > tbody > tr > td,.table-borderless > tfoot > tr > td,.table-borderless > thead > tr > td,.table-borderless > tbody > tr > th,.table-borderless > tfoot > tr > th {border: none !important;border-bottom: none !important;}/* 清除单元格内边距带来的视觉“分隔感”（可选） */.table-borderless > tbody > tr > td,.table-borderless > tbody > tr > th {padding: 8px 6px; /* 可按需调整 */}/* 防止响应式容器产生额外边框或阴影 */.table-responsive {border: none;box-shadow: none;}</style>

注意事项：

1. 不要删除 bootstrap.min.css —— 否则将丢失 .table, .table-responsive, .text-center 等核心工具类；
2. !important 在此处是必要的，用于对抗 Bootstrap 3 的高优先级内联边框规则；
3. 避免混用过时属性如 border="0" cellspacing="0"，HTML5 中已废弃，应由 CSS 控制；
4. 若使用 Bootstrap 4/5，请改用 .table-borderless（原生支持更完善），且无需额外 !important（但仍建议局部覆盖验证）。

总结：

真正“无边框”的 Bootstrap 表格 = .table.table-borderless 基础类 + 全方位 border: none !important CSS 覆盖（作用于 thead/th、tbody/td、tfoot 等所有边界节点）。该方案兼容 Bootstrap 3.3+，语义清晰、维护成本低，且不影响其他 Bootstrap 组件样式。