text-transform仅作用于含文本的元素，直接设置th、td、caption有效，而table、thead、tr等无文本容器无效；它只转换ascii字母，对中文、数字、标点无影响，且不改变实际内容。
text-transform 能让表格表头“看起来”统一大小写，但不会改原始 HTML 内容，也不影响中文、数字、标点——这点不确认清楚，后续八成会踩坑。
哪些表头元素加 text-transform 才真生效
直接作用于 <th> 元素最稳妥；<code><td> 也能用，但通常不用于表头；<code><caption></caption> 同样支持。别往 <table> 根标签上加，它不渲染文本，属性无效。
<p>常见错误现象：给 <code><thead> 或 <code><tr> 加样式，结果没反应——因为它们本身不含可渲染文本，<code>text-transform 不继承到子元素（除非显式设 inherit）。
- 正确写法：
th { text-transform: uppercase; } - 错误写法：
thead { text-transform: uppercase; }（无效） - 若需兼容旧版 Safari 的
<select></select>表单控件嵌在表头里，别指望option跟着变——它压根不支持该属性
text-transform: uppercase 在中英文混排表头里的实际表现
它只转换 ASCII 字母（A–Z、a–z）和部分拉丁扩展字符（如 é、ñ），对中文、阿拉伯数字、连字符、括号、斜杠等完全无感。
例如：<th>user ID (v2.1)</th> 加了 text-transform: uppercase 后显示为 USER ID (V2.1)——字母变了，数字和符号原样保留。
- “张三_abc” → 渲染为 “张三_ABC”，中文不动，下划线保留
- “API-2024” → 变成 “API-2024”，连字符和数字不受影响
- 某些等宽字体里大写字母 baseline 偏低，可能和中文对不齐，建议搭配
vertical-align: middle或微调line-height
为什么复制表头文字还是小写？这正常吗
完全正常。text-transform 是纯渲染层控制，不影响 DOM 实际内容。
以下行为全部保持原始大小写：
-
document.querySelector('th').textContent返回的仍是小写字符串 - 用户选中表头文字复制 → 粘贴出来是 “user id”，不是 “USER ID”
- 如果表头内容来自 JS 动态生成或 API 接口，后端返回什么，页面就“看起来”像什么，但原始值没变
真要让复制/导出/筛选时也用大写，必须用 JS 处理：th.textContent = th.textContent.toUpperCase()——但注意，这会破坏中文、数字结构，慎用。
别把 text-transform 和表单输入混用
表格里如果嵌了 <input type="text"> 或 <textarea></textarea> 作为可编辑表头，千万别只靠 text-transform: uppercase 来“统一格式”。
- 用户看到的是大写，但
input.value仍是小写，提交后端校验失败概率极高 - 筛选、排序、JS 比对都按原始值走，视觉和逻辑脱节
- 真正需要数据大写时，必须在提交前用
input.value = input.value.toUpperCase()显式转换
表格表头的大小写统一，本质是视觉一致性问题；一旦涉及数据流转，CSS 就该退场，JS 得接手——这个边界不划清，调试时会浪费大量时间查“为什么明明显示大写却匹配不上”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
