中文和英文列基线不齐的根源在于字体设计差异，应统一设置 vertical-align: middle 或 text-bottom 于 /，配合 font-family、line-height 和空单元格处理（如 或 empty-cells: show）来稳定对齐。
中文列和英文列文字基线不齐怎么办
直接用 <table> 默认对齐，中文和英文会明显错位——中文下沉、英文上浮，因为中英文默认字体的基线（baseline）不同。这不是 CSS 的 bug，而是字体设计本身的差异。
<p>最可靠的做法是统一用 <code>vertical-align: middle 或 vertical-align: text-bottom，但要注意：只设在 <td> 或 <code><th> 上，不能只设在 <code><tr> 上（无效）。
<ul>
<li>
<code>vertical-align: middle 对多数中英混排场景最稳，视觉居中感强
vertical-align: text-bottom 适合希望文字底部对齐的场景（比如跟图标对齐）vertical-align: baseline（默认值），它会让中英文按各自字体基线对齐，错位最明显font-family 设置影响对齐效果
如果中英文用了不同字体（比如中文用 "PingFang SC"，英文用 "Helvetica"），即使 vertical-align 相同，行高和字形高度仍可能不一致。这时需要显式控制 line-height 和 font-size。
- 给整列或单元格统一设置
font-family，例如font-family: "Helvetica Neue", "PingFang SC", sans-serif，让浏览器尽量选同一字体族下的变体 - 强制统一
line-height: 1.4（无单位），比用px或em更稳定 - 如果中文字体默认字号偏大，可单独给英文单元格加
font-size: 0.95em微调
表格内容为空时对齐失效的常见坑
当某行中文列有内容、英文列为空（<td></td>），浏览器会把空单元格渲染成“高度塌缩”，导致 vertical-align 失效，看起来像上下错位。
- 空单元格必须至少含一个不可见字符，如
- 更稳妥的是统一用
empty-cells: show（设在<table> 上），但注意 IE 不支持 <li>如果用 JavaScript 动态填充数据，记得空值也要塞 <code>，不能留纯空字符串 - 给中文列加
white-space: nowrap防止意外换行（慎用，可能溢出） - 英文列加
word-break: break-all或overflow-wrap: break-word控制断行位置 - 关键是要确保两列的
max-height一致，并配合box-sizing: border-box
响应式表格里列宽变化引发的新错位
用 vw、% 或 flex 布局表格时，列宽缩放可能让中文字体换行点改变，进而影响行高，造成原本对齐的单元格突然错位。
对齐不是调一次就一劳永逸的事——字体加载顺序、系统字体回退、甚至用户禁用字体平滑，都可能让像素级对齐偏移。真要严控，得在真实设备上多测几轮，尤其注意 macOS 和 Windows 下的字体渲染差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
