bootstrap表格默认无边框是因为其将border-collapse设为collapse且td/th边框设为0；启用table-bordered需同时添加class="table"和class="table-bordered"，否则不生效。
Bootstrap表格默认为什么没边框
因为 Bootstrap 5+ 默认把 table 的 border-collapse 设为 collapse，且所有单元格的 border 都设为 0 —— 这是为响应式和语义化设计让步的结果，并非漏写样式。
直接加 border: 1px solid #dee2e6 到 table 上会失效：边框被内部 td/th 的 border: 0 覆盖，且 border-collapse: collapse 会让相邻边框合并，单加外边框也看不出效果。
正确启用 table-bordered 的前提条件
必须确保 Bootstrap CSS 已加载（CDN 或本地构建），且 table 元素同时满足两个条件：
- 有
class="table"（基础样式必需） - 额外加上
class="table-bordered"
缺一不可。只写 table-bordered 不生效，因为它的规则依赖 .table 提供的重置和基础排版。
示例正确写法：
| Name | Age |
|---|---|
| Alice | 30 |
table-bordered 实际渲染的边框逻辑
它不是简单地给 table 加外边框，而是给每一行、每个单元格都加了细边框，并用 border-collapse: collapse 统一控制重叠。最终效果是「网格状」边框，线宽为 1px，颜色取自 Bootstrap 的 $border-color（默认 #dee2e6）。
常见误操作：
- 手动给
td加border→ 与table-bordered冲突，导致双线或错位 - 覆盖
border-collapse为separate→ 边框变粗、间距失控，table-bordered失效 - 用
!important强改border-color却忘了同步改th和thead的背景色 → 表头边框在深色背景下看不见
想自定义边框颜色或粗细怎么办
不要直接覆盖 .table-bordered td，而是利用 Bootstrap 的 CSS 变量或扩展类：
- 全局改：在 :root 或自定义 CSS 中重设
--bs-border-color: #6c757d - 局部改：新增类如
.table-bordered-custom，仅重写border-color，并确保它作用于th,td,thead th - 加粗边框：Bootstrap 本身不提供
table-bordered-2这类类名，需自己写规则，例如：.table-bordered-thick td, .table-bordered-thick th { border-width: 2px; }
注意：修改边框粗细后，border-collapse: collapse 仍有效，但相邻边框会叠加显示，视觉上可能比预期更重。
最易被忽略的一点：如果表格嵌套在 .table-responsive 容器里，横向滚动时边框可能在滚动临界点断开——这不是样式问题，是 overflow-x 截断了边框渲染，需要额外用 border-right 补全最右列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
