CSS框架表格样式不统一主因是嵌套场景样式继承中断、框架版本混用及默认配置差异；应通过DevTools定位冲突类，用自定义class窄范围覆盖，优先利用框架定制机制。
为什么 CSS 框架的表格样式会不统一
多数 CSS 框架（如 Bootstrap、Tailwind、Bulma）默认只对 .table 或 table 元素提供基础重置，但不会强制覆盖所有嵌套场景：比如 table 在 modal 里、在 card 里，或被第三方组件动态插入时，父级样式、scoped CSS、CSS-in-JS 注入顺序都可能打断样式继承链。更常见的是框架本身对 th/td 的 padding、border、text-align 做了差异化处理，而你项目里混用了不同版本的框架类（如 Bootstrap 4 的 .table-sm 和 Bootstrap 5 的 .table-striped），导致渲染结果错位。
如何定位具体冲突的类名和来源
打开浏览器 DevTools，选中一个异常的 table 单元格，在 Styles 面板里逐层查看：
- 当前元素上生效的
class（注意是否被!important覆盖） - 来自
user agent stylesheet的原始浏览器默认样式是否意外生效（比如未加border-collapse: collapse） - 检查
Computed标签页中border、padding、vertical-align的最终值，看是哪个规则覆盖了预期样式 - 用
filter搜索关键词table、th、td，快速定位框架 CSS 文件中的原始定义位置
tailwind.config.js 的 theme.extend.container 或插件中启用；Bootstrap 5 移除了 .table-bordered 对 thead 的默认边框，但旧文档示例仍沿用该写法，容易误导。
安全覆盖默认类的三种方式（按推荐顺序）
不要直接修改框架源码或用大量 !important，优先走可维护路径：
- 在项目主 CSS 文件末尾添加针对性重置，例如：
table.data-table th, table.data-table td { padding: 0.375rem 0.75rem; border: 1px solid #dee2e6; }—— 用自定义 class（如data-table）包裹表格，避免污染全局table - 利用框架的定制机制：Bootstrap 可通过 SCSS 变量重设
$table-cell-padding-y和$table-border-color；Tailwind 可在theme.extend中扩展table相关工具类 - 对动态插入的表格（如富文本编辑器输出），用属性选择器兜底：
table[contenteditable="true"] th, table[contenteditable="true"] td { vertical-align: top; }
工具类组合失效时的调试要点
当 .table .table-striped .table-hover 连用却无反应，问题往往不在类名拼写：
- 检查是否遗漏了必要的父容器类（如 Bootstrap 5 要求
.table必须直接作用于<table>，不能套在<div>里再加类） - Tailwind 工具类需显式启用：确认
tailwind.config.js中plugins: [require('@tailwindcss/typography')]并未误删表格支持（v3.3+ 默认不包含table-auto等） - Vue / React 组件中使用 scoped style 时，
:deep(table)或::v-deep table才能穿透作用到子组件表格 - 某些框架（如 Bulma）的表格工具类是互斥的——
is-narrow和is-fullwidth不能共存，否则后者会被前者覆盖
