直接给 <td> 或 <th> 加 style 属性最简单但不宜滥用，仅适用于临时调试或极少数特例；应优先使用语义化 class（如 .amount、.status-success）配合规范字体链和统一单位（推荐 px）来确保跨平台一致性与可维护性。
直接给 <td> 或 <th> 加 style 属性最简单，但别滥用
想快速改某个单元格的字体，比如让第一行表头加粗、某列数字变小，直接写 <th style="font-weight: bold; font-size: 18px;">姓名</th> 就能生效。这种内联样式优先级最高，会覆盖外部 CSS 规则。
但注意：如果表格有几十个单元格，每个都手写 style，后期改字号或字体时得逐个替换，极易出错漏改。它只适合临时调试或极少数特例。
- 中文字体名必须加引号，比如
font-family: "Microsoft YaHei", sans-serif;—— 不加引号在 macOS/Linux 上大概率失效 -
font-size推荐用px或rem，避免用em（它会继承父元素缩放，表格里层级嵌套容易失控） - 别用
<font>标签——HTML5 已废弃，现代浏览器虽兼容，但校验失败，且无法响应式适配
用 class 区分不同语义的单元格，比如 .amount、.header、.note
真实项目里，表格内容通常有明确含义：金额列要右对齐+等宽字体，状态列要加颜色，备注列字号小一点。这时该用语义化 class：
th { font-weight: 600; }
.amount { text-align: right; font-family: "Consolas", "SF Mono", monospace; }
.status-success { color: #28a745; }
.note { font-size: 12px; color: #6c757d; }
对应 HTML 写成：<td class="amount">¥12,800.00</td>、<td class="status-success">已发货</td>。
立即学习“前端免费学习笔记（深入）”；
- class 名别用
red-text这种纯样式名，改设计时（比如换成绿色）就得改 HTML，违背语义原则 - 同一列多个单元格共用 class，比给每个
<td>单独写style更易维护 - 如果整列都要统一样式，可用
<col class="col-amount">配合 CSS 的col.col-amount td选择器，减少 class 重复
font-family 必须带 fallback 链，否则 Windows 和 macOS 显示不一致
只写 font-family: 微软雅黑; 或 font-family: Microsoft YaHei; 在非 Windows 系统上基本不生效——不是浏览器 bug，而是字体根本不存在。
正确写法是按系统主力字体顺序排列，并以通用族名收尾：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
- macOS 优先匹配
PingFang SC，Windows 找Microsoft YaHei，Linux 用Noto Sans CJK SC - 前面的
-apple-system和BlinkMacSystemFont是 Safari/Chrome 在 macOS 上的系统字体别名，比硬写 "Helvetica Neue" 更可靠 - 千万别把
"SimSun"放前面——Win11 默认不装宋体，fallback 失败后可能退到 Times New Roman，中文显示异常
表格里 font-size 缩放容易踩坑：rem 受根字号影响，px 最稳
如果页面全局设了 html { font-size: 16px; }，那 font-size: 0.875rem 就是 14px；但如果某处动态改了根字号（比如响应式切换），所有 rem 值都会跟着变——表格数据列尤其怕这种意外缩放。
- 固定尺寸场景（如后台管理表格）直接用
px：表头16px，正文14px，小字备注12px - 需要随系统字号调整的（如阅读型报表），才考虑
rem，但务必测试 iOS/Android 字体放大设置下的表现 - 避免混用单位：同一张表里有的用
px、有的用em，会导致视觉节奏断裂
真正麻烦的不是怎么写样式，而是字体链没配全、单位选错、class 没按语义命名——这些细节一漏，表格在不同设备上就长得不一样。
