text-transform: uppercase 在 上可能不生效，因被父级 text-transform: none 覆盖、内联子元素不继承、浏览器对 th 继承处理异常或 ui 框架重置样式所致；需用明确选择器直接作用于 th 并确保无更高优先级规则覆盖。
text-transform: uppercase 在表格表头（<th>）上能正常生效，但必须避开 <code><table> 内部的特殊渲染逻辑和继承干扰——否则可能“写了没反应”或“局部失效”。
<h3>为什么 <code><th> 加了 <code>text-transform: uppercase 有时不生效
浏览器对表格单元格有隐式样式重置，尤其当 <th> 被包裹在 <code><thead> 或嵌套了 <code><div>、<code><span></span> 时，容易被父级 text-transform: none 覆盖（比如某些 UI 框架或重置 CSS 默认设了 th { text-transform: none; }）；另外，若表头内容含内联元素（如 <span class="icon">●</span> 标题），text-transform 不会穿透到子元素，除非显式继承或单独设置。
- 检查是否被更高优先级规则覆盖：用浏览器开发者工具看 computed 样式里
text-transform是否显示为uppercase，还是被none覆盖 - 避免在
<th> 内混用 <code><strong></strong>、<span></span>等容器——它们默认不继承text-transform，需额外加th span { text-transform: uppercase; } - 不要依赖
<thead> 统一设置：有些旧版 Safari 对 <code>thead th的继承处理异常，建议直接作用于th元素本身th上用text-transform: uppercase的安全写法最稳妥的方式是用明确选择器 + 显式继承控制，同时兼容中英文混排场景：
- 统一加类更可控：
<th class="table-header-upper">User ID</th>，配合 CSS：.table-header-upper { text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; } - 若需局部恢复大小写（比如表头含版本号
v2.1），在对应子元素上设th .version { text-transform: none; } - 中文表头不会变（这是正常行为），但若混排英文缩写（如
API 状态），只有API变成API，状态不动——别误以为样式失效 - 禁用
!important：它可能掩盖真实继承问题，且在组件化项目中易引发样式冲突
表格中哪些地方不能靠
text-transform实现“真大写”以下场景加了
text-transform: uppercase也无意义，必须用 JavaScript 处理原始值：-
<input type="text">套在<th> 里做可编辑表头：用户看到大写，但 <code>input.value仍是小写，提交后后端收不到大写字符串 - 需要复制表头文字用于 Excel 粘贴或 API 参数拼接：复制出来永远是原始大小写，
document.querySelector('th').textContent返回的也是小写 - 服务端渲染表格（SSR）时希望 HTML 源码就是大写：CSS 无法改变服务端输出，得在模板层调用
.toUpperCase() - 使用
<th> 配合 <code>data-*属性做排序或筛选：比较逻辑基于原始字符串，text-transform不影响dataset值真正容易被忽略的是：表格列宽常因全大写后字符视觉宽度变化而收缩（尤其等宽字体下大写字母更占空间），导致文字换行或省略。上线前务必在真实数据量下检查
th宽度表现，必要时用white-space: nowrap或微调min-width。
- 统一加类更可控：
