本文详解如何在 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-2022</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>
⚠️ 注意事项：
- 不要删除
bootstrap.min.css—— 否则将丢失.table,.table-responsive,.text-center等核心工具类； -
!important在此处是必要的，用于对抗 Bootstrap 3 的高优先级内联边框规则； - 避免混用过时属性如
border="0" cellspacing="0"，HTML5 中已废弃，应由 CSS 控制； - 若使用 Bootstrap 4/5，请改用
.table-borderless（原生支持更完善），且无需额外!important（但仍建议局部覆盖验证）。
✅ 总结：
真正“无边框”的 Bootstrap 表格 = .table.table-borderless 基础类 + 全方位 border: none !important CSS 覆盖（作用于 thead/th、tbody/td、tfoot 等所有边界节点）。该方案兼容 Bootstrap 3.3+，语义清晰、维护成本低，且不影响其他 Bootstrap 组件样式。
