Bootstrap 5 的 table 类默认无边框和斑马纹，需显式添加 table-bordered、table-striped 等类；响应式需用 table-responsive 包裹 table；自定义对齐/行高优先用工具类；框架集成时注意 class 合并逻辑。
Bootstrap 5 的 table 类默认不带边框和斑马纹？
对，table 默认只有基础排版（字号、行高、内边距），没有边框、无 hover 效果、无条纹——这是故意的，不是你漏写了类。想有视觉区分，必须显式加类。
-
table-bordered：加外边框 + 单元格边框（注意：它会给thead和tbody之间也加线，有时会显得太重） -
table-striped：仅对tbody > tr:nth-of-type(odd)应用背景色，thead和tfoot不参与 -
table-hover：只在tbody > tr上生效，悬停时变色；如果用了table-striped，hover 会覆盖奇数行颜色 - 别直接给
table设borderCSS——会和table-bordered冲突，且破坏响应式断点逻辑
响应式表格在小屏上横向滚动失效？
常见错法是把 table-responsive 加在 table 标签上，但 Bootstrap 要求它必须包裹整个 table，且只能作用于块级容器。
- 正确写法：
<div class="table-responsive"> <table class="table">...</table> </div>
- 如果内部用了
table-sm或自定义font-size，小屏下文字可能仍溢出——此时需配合text-nowrap在关键列（如 ID、token）上防折行 - 移动端滚动体验差？别依赖
table-responsive做复杂数据展示，真要适配小屏，优先考虑用card+list-group重构为垂直布局
自定义表头/行高/文字对齐，该改哪几个类？
Bootstrap 提供了轻量级工具类，够用就别动 SCSS 变量——改了会影响全局 table 行为。
- 表头对齐：
thead-light（浅灰底）或thead-dark（深灰底），仅控制背景和文字色，不改字体粗细 - 行高压缩：
table-sm把padding从0.75rem降到0.3rem，但会导致单行内容挤在一起，慎用于含换行文本的单元格 - 列对齐：用
text-center、text-end直接加在th或td上，比写 CSS 更可靠（因为table的text-align继承规则特殊） - 别给
tr设height——会破坏vertical-align行为，想控制高度统一改td/th的padding
和 Vue/React 一起用时，class 混合丢失或重复？
框架的 class 合并逻辑和 Bootstrap 的命名习惯容易打架，尤其动态绑定 class 时。
- Vue 中用对象语法：
:class="{ 'table table-striped': loading === false }"，别写成class="table" :class="..."——后者会覆盖前者 - React 中用
clsx或模板字符串拼接，避免className="table ${isStriped ? 'table-striped' : ''}"这种空格残留 - 如果用了
table-hover但 JS 动态删了某行，再加回来时 hover 效果可能失效——因为事件委托没重新绑定，建议用tbody做事件代理，或用 CSS:hover原生支持（Bootstrap 就是这么做的） - 第三方组件库（如 Element Plus）自带 table 样式，和 Bootstrap 的
table类共存时，CSS 权重往往被覆盖——要么禁用其样式，要么用!important强制（不推荐），更稳的是用 scoped style 或 CSS Modules 隔离
table 类设计得克制，意味着它不替你做决定，但也不会偷偷改你的样式。真正难的不是加类，而是判断哪些视觉信息必须保留、哪些在小屏可以降级、以及当 JS 动态操作 DOM 时，CSS 的响应边界在哪。
