引入CSS框架后表格样式冲突的解决方法有四种：一是用更具体的选择器提升特异性；二是谨慎使用!important；三是通过唯一class隔离作用域；四是检查并覆盖框架的reset/base样式。
当引入 CSS 框架（如 Bootstrap、Tailwind、Ant Design）后，其内置的表格样式会自动作用于 CSS 优先级由选择器特异性（specificity）决定。框架常用 在开发调试或局部强覆盖时， 不让框架样式“碰到”你的表格，从根源上避免冲突。 立即学习“前端免费学习笔记（深入）”； 很多框架会在基础层（base.css 或 _reboot.scss）重置表格默认行为，比如清空边框、设置 不复杂但容易忽略：覆盖不是硬刚，关键是找准样式来源、控制作用范围、合理提升优先级。先查、再定、后写，比反复加 元素，导致你写的自定义样式（比如边框、文字对齐、背景色）失效。这不是代码写错了，而是 CSS 优先级被框架“压”住了。
用更具体的选择器提升权重
table、.table 这类基础选择器，权重低；你只需让自己的选择器“更具体”，就能覆盖它。
table { border-collapse: separate; } —— 容易被覆盖.my-table table、article table.data-table、#order-summary table
table[role="grid"]、table:not(.bootstrap-table)
利用 !important（谨慎但有效）
!important 是最快见效的方式。关键是要控制使用范围，别全局滥用。
th { background: #2c3e50 !important; color: white !important; }
.custom-table th 再加 !important，比直接写 th 更可控隔离样式作用域（推荐长期方案）
class="my-custom-table"），并在 CSS 中完全基于该 class 编写所有规则：.my-custom-table { ... } .my-custom-table th { ... }
table 类；Tailwind 可通过 @layer components 重置或跳过 @tailwind utilities 中的 table 相关规则检查并覆盖框架的 reset / base 样式
border-collapse: collapse。你自定义的样式可能还没生效，就被这些底层规则“洗掉”了。
table { margin-bottom: 1rem; }，你就写 .my-table { margin-bottom: 0 !important; }
table, th, td { all: unset; } 彻底清空继承，再从零定义!important 更可持续。
