letter-spacing 在 table/td 上易失控，因表格渲染限制、断行吞间隙、border 覆盖、字体特性及浏览器兼容性等问题；需满足字体、字号、line-height 和继承重置条件才可谨慎使用；推荐优先用 padding、对齐、数字等宽及 transform 替代。
letter-spacing 可以用，但直接套在 table 或 td 上容易失控——它会把中文、英文、数字、标点全拉一遍，表格单元格内容一多就撑破边框，小字号下还可能粘连。
为什么给 td 设 letter-spacing 常常失效
不是代码写错了，而是表格渲染有隐性限制：
- 表格单元格默认
white-space: normal，但若内容是连续无空格的长字符串（如身份证号11010119900307271X），浏览器会优先按字符断行，letter-spacing加的间隙反而被折行吞掉，看起来“没变” -
border-collapse: collapse时，letter-spacing拉开的间隙会被相邻 cell 的 border 覆盖一部分，视觉上打折 - 某些字体（尤其是等宽中文字体）字身宽度固定，
letter-spacing只在字框右缘加空，但表格自动计算列宽时只认内容盒尺寸，结果列宽没变、文字却溢出 - 旧版 Safari 对
td的letter-spacing支持不稳定，尤其配合font-feature-settings: "tnum"显示数字时，间距忽大忽小
td 里该不该用 letter-spacing: -0.02em 收紧中文？
可以，但必须满足三个条件，缺一不可：
- 字体明确支持 OpenType kerning，比如
font-family: "SF Pro Display", system-ui；免费中文字体如“思源黑体”需确认是否启用font-kerning: normal -
font-size≥ 14px，且line-height≥ 1.6 —— 否则“口”“目”类字笔画会重叠，尤其在 Windows Chrome 下更明显 - 显式重置继承：如果父级
table设了letter-spacing: 0.03em，就得在td里补一句letter-spacing: -0.02em，而不是指望它自动抵消
中英文混排表格里怎么避免“英文太松、中文太紧”
同一值对汉字和拉丁字母的视觉影响差 3–5 倍，硬套会翻车。稳妥做法是分层控制：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 先统一用
em单位：td { letter-spacing: 0.02em; }（作为基线） - 再用
span包裹英文内容：<td>订单号：<span class="en">ORD-2026-789</span></td> - 单独收紧英文：
.en { letter-spacing: -0.04em; }—— 注意不是-0.04px，否则在 12px 字号下≈0 - 如果表格要打印，加媒体查询：
@media print { .en { letter-spacing: 0.01em; } }，因为打印引擎对负值渲染更保守
比 letter-spacing 更稳的替代方案
真要控制表格可读性，优先考虑这些不依赖字符间距的手段：
- 用
padding扩大单元格内边距，比拉字距更可控；td { padding: 8px 12px; }比letter-spacing: 1px更少引发换行异常 - 对齐方式调成
text-align: center或text-align: left，视觉疏密感提升明显，且无兼容风险 - 关键列（如状态、操作）用
font-variant-numeric: tabular-nums让数字等宽，比调间距更能保证纵向对齐 - 实在要微调字距，改用
transform: translateX(0.5px)模拟单侧偏移，它不参与盒模型计算，也不会触发表格重排
真正难的是混排场景下单位选错——px 在高 DPI 屏上糊成一片，% 根本不合法，em 忘了重置继承就会一路透传到嵌套的 button 里。动手前先打开 DevTools 看 computed 值，别信预览。
