uni-app 表格对齐需显式控制：因 u-table 等组件基于 view 模拟，text-align 仅在 u-th/u-td 上生效，app 端解析不一致，须每个单元格用 align 属性（left/center/right），配合 font-size、line-height、padding 统一设置，并按字段类型动态对齐。
uni-app 里没有“自动对齐”的表格渲染机制 —— 所有对齐行为都得靠你显式控制，否则不同端（尤其是 APP 和小程序）会各自按自己理解“猜”对齐方式，结果就是文字错位、列宽塌陷、表头和数据行脱节。
为什么 text-align 在表格组件里经常失效
u-table、uni-table 等组件底层用的是 view 模拟表格，不是原生 <table>，所以 CSS 的继承链和盒模型跟 H5 不一样：
<ul>
<li>
<code>align 属性只在 <u-th></u-th> 和 <u-td></u-td> 上生效，写在父级 <u-table></u-table> 上无效
text-align: center 的解析不一致，iOS 常忽略，Android 可能只对纯文本生效，带 <button></button> 或多行 <view></view> 就失效text-align 对子元素完全不起作用，必须用 justify-content + align-items
colspan）单元格若没设固定宽度，对齐会因宽度计算偏差而“看起来没对齐”
u-table 中正确设置单元格对齐的写法
别依赖全局样式，每个单元格单独声明对齐方式，且优先用组件属性而非 CSS：
- 表头统一用
<u-th align="center"></u-th>，不要用 class 覆盖 - 数据单元格必须写
<u-td align="right">{{ item.price }}</u-td>，align支持"left"/"center"/"right" - 如果内容是自定义结构（比如图标+文字），需在
cell-style里返回 flex 样式：{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' } - 避免在
<u-td></u-td>内再套一层<view></view>后加text-align—— 这层 view 宽度可能撑不满，导致“看似右对齐实则左偏”
需要真正“自动”对齐数字/日期/文本时的处理逻辑
所谓“自动”，其实是根据字段类型动态决定对齐方式，不能靠 CSS 一招鲜：
- 数字类字段（金额、序号、百分比）默认右对齐：
align: item[prop] === 'number' ? 'right' : 'left' - 日期字符串建议右对齐（便于小数点/分隔符对齐），但需先标准化格式，否则
"2026-06-19"和"6/19"宽度差异会导致视觉错位 - 中文文本统一左对齐；中英混排字段若含英文 ID 或编码，也建议左对齐（右对齐会让末尾标点“悬空”）
- 对齐前先 trim 字符串、过滤空格，否则
" 100 "右对齐会留出左右空白，破坏对齐感
APP 端对齐错位的隐蔽原因和修复点
即使代码写对了，APP 端仍可能“看起来没对齐”，常见真凶是：
-
font-size不一致：H5 用14px，APP 默认用系统字体缩放，需强制设font-size: 14rpx并禁用用户缩放 - 行高未锁定：
line-height没设或设为normal，导致多行文本高度浮动，视觉上“上下不对齐”，应统一设line-height: 1.4或固定像素值 - padding 差异：u-table 默认 padding 是 rpx，但某些端换算后出现半像素，建议改用整数
padding: 12rpx，避免 subpixel 渲染抖动 - fixed 列或 sticky 表头时，左侧列单元格高度必须严格一致，否则对齐线被拉歪 —— 高度不齐的单元格要用
<view style="height: 40rpx"></view>占位补足
对齐不是加个 text-align 就完事的事，它卡在渲染层、布局层、字体层三者的交界处。最容易被忽略的是：APP 端没有“继承对齐”这回事，每个单元格都得亲手指定，且要配合字体、行高、padding 一起调 —— 少一个，就偏一点。
