直接改 .table 类CSS通常无效，因Bootstrap等框架使用高优先级嵌套选择器（如 .table > thead > tr > th）和 border-collapse: collapse，外部样式若未匹配相同特异性或未同步重置 border-collapse 与 overflow，圆角、外边框等自定义效果将失效。
直接改 .table 类的 CSS 通常无效——Bootstrap、Tailwind 等框架用高优先级选择器或 utility-first 机制隔离样式，硬覆盖容易失效，且破坏响应式逻辑。
Bootstrap 表格样式重写为什么经常失效
Bootstrap（v4/v5）默认给 .table 加了 border-collapse: collapse 和大量嵌套选择器（如 .table > thead > tr > th），外部样式若没匹配相同 specificity 就会被忽略。
- 不要只写
table { border-radius: 8px; }—— 它被.table的border-collapse: collapse抵消，圆角不生效 - 想加外边框？得同时覆盖
.table自身和内部单元格的 border，否则只看到“内线” - Bootstrap v5 移除了
*border-collapsehack，但 IE11 兼容层仍可能干扰border-radius渲染 - 示例：要让带圆角的 bordered 表格生效，必须配
overflow: hidden+ 显式重置border-collapse: separate
Tailwind 中如何安全地自定义表格外观
Tailwind 默认不提供表格专用类，靠组合 utility 实现，但直接堆 border、rounded 会和 border-collapse 冲突。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 禁用默认 collapse：加
border-separate（对应border-collapse: separate），再用border控制各方向边框 - 圆角生效前提：父容器设
overflow-hidden，且th/td不带border-spacing干扰 - 避免用
rounded-lg直接作用于table—— 它只裁剪 table 自身盒模型，不裁剪内部 cell 边框 - 推荐模式：
<div class="overflow-hidden rounded-lg"><table class="border-separate border-spacing-0">...</table></div>
自定义元素里嵌套表格时样式穿透失败
如果表格在 <my-data-grid> 这类自定义元素中，外部 CSS 默认无法影响其内部 table，尤其用了 Shadow DOM。
立即学习“前端免费学习笔记（深入）”；
- 没 Shadow DOM：确保自定义元素本身有
display: block和font: inherit，否则内部表格继承链断裂 - 有 Shadow DOM：外部样式无法直达
table，必须用::part(table)暴露接口，或在组件内部用:host+slot控制作用域 - 别依赖
!important强行穿透 —— 在 Safari 16.4+ 中，Shadow DOM 内部!important优先级仍高于外部 - 调试技巧：用 DevTools 的 “Elements → Styles” 面板检查 computed 样式，看哪条规则被 override 及原因
真正卡点不在怎么写样式，而在搞清样式作用域边界——是框架层、组件封装层，还是浏览器原生渲染层。漏掉其中一层，重写就变成无意义的覆盖游戏。
