根本原因是uni-app在app和小程序端不支持原生的colspan/rowspan，h5虽可运行，但编译到微信小程序或app时，colspan="2"仅视觉模拟，列宽仍按原始计算，导致错位、边框断裂、数据列错对；uview/u3-table等组件也仅通过占位+隐藏border模拟colspan，不支持rowspan。
uni-app 里 colspan 渲染错位，根本原因是啥
不是你写错了，是 uni-app 在 APP 和小程序端压根不认原生 <table> 的 <code>colspan 和 rowspan。H5 能跑通，但一编译到微信小程序或 App，colspan="2" 就变成“假装跨了”，实际列宽还是按原始列算，导致视觉错位、边框断裂、数据列对不上。uView 的 u-table 或 uv3-table 也只模拟 colspan，底层靠手动占位 + 隐藏 border，rowspan 直接不支持。
用 u-row + u-col 模拟表头自动对齐的实操要点
别硬套表格语义，改用 uView 的栅格系统做“逻辑表格”。表头和数据行都用 <u-row></u-row> 包裹，每列对应一个 <u-col span="x"></u-col>，靠 justify 和 customStyle 控制对齐和间距：
- 必须显式设
span总和为 12（比如三列就用span="4"），否则宽度会塌缩 - 表头跨列？不要写
colspan，而是把“合并单元格”拆成多个<u-col></u-col>，再用customStyle="border: none; background: #f8f9fa;"统一样式“连起来” - 数据行列数必须和表头严格一致，哪怕某列空着也要占位
<u-col span="4"></u-col> - APP 端开启
border-stripe会导致跨列区域边框断开，建议关掉，改用customStyle="border-bottom: 1px solid #eee;"
需要真正 rowspan 或固定行列时，绕不开的三层结构
比如第一行表头占两行、左侧操作列固定、右侧数据可横向滚动——这时候 u-table 或栅格都撑不住，必须手写三层嵌套：
- 外层用
<scroll-view scroll-x scroll-y></scroll-view>，但**不能直接包表格内容**，只负责滚动容器 - 表头单独抽离，加
position: sticky; top: 0;，父容器必须设height且不能有overflow: hidden - 左侧列用
position: sticky; left: 0;，所有单元格高度必须一致，高度不齐会在 APP 端错位，要用空白<view></view>补高 - 主体表格用
transform: translate(x, y)模拟滚动，监听scroll事件动态更新偏移量，避免scroll-view重绘抖动
为什么“自动对齐”在 uni-app 里总出问题
所谓“自动”，其实是各端渲染引擎对 Flex 计算的差异：微信小程序的 WebView 对 flex-basis 解析不准，APP 端对 calc() 支持弱，H5 又可能因字体加载延迟导致宽度重排。真正可靠的对齐，靠的是“强制约束”——每列设死 width（如 "150rpx" 或 "20%"），禁用弹性伸缩，用 box-sizing: border-box 把 padding/border 算进宽度里。跨列区域的宽度不是“自动分配”，而是靠相邻列主动让出空间来腾位置。
