uni-app无原生table组件，因各平台对HTML表格渲染差异大；推荐用CSS Grid模拟，需预计算grid-row/grid-column实现跨行跨列，注意微信小程序基础库≥2.11.0及iOS兼容性问题。
uni-app 里没有原生 table 组件，别硬套 HTML 表格语义
uni-app 的 view 渲染层不支持 <table><tr><td rowspan="2"></td></tr></table> 这类 DOM 原生表格渲染逻辑，H5 端靠 WebView 模拟尚可，但小程序端（尤其是微信、支付宝）会直接忽略 rowspan/colspan，甚至报错或渲染错乱。强行用 rich-text 插入 HTML 表格更不可取——样式不可控、无法绑定事件、无法响应式。
真正能落地的方案只有两个：用 CSS Grid 布局模拟表格结构，或用绝对定位 + 计算行列坐标手动拼接单元格。前者更可控，后者适合极复杂动态合并场景。
用 display: grid 实现跨行跨列，关键在 grid-row 和 grid-column
CSS Grid 是目前最接近原生表格语义的方案，且 uni-app 所有平台（H5/小程序/App）都支持基础 Grid 属性（注意：微信小程序基础库需 ≥ 2.11.0，iOS 微信需 ≥ 8.0.33）。
-
grid-row: 2 / 4表示从第 2 行线开始，到第 4 行线结束（即跨 2 行） -
grid-column: 3 / 6表示从第 3 列线开始，到第 6 列线结束（即跨 3 列） - 所有单元格必须显式声明
grid-row和grid-column，不能依赖自动流布局 - 行高列宽需统一用
grid-template-rows/grid-template-columns定义，避免用auto导致跨行后高度塌陷
示例片段：
<view class="grid-table">
<view class="cell" style="grid-row: 1 / 2; grid-column: 1 / 2;">A1</view>
<view class="cell" style="grid-row: 1 / 3; grid-column: 2 / 3;">B1（跨2行）</view>
<view class="cell" style="grid-row: 2 / 3; grid-column: 1 / 3;">A2（跨2列）</view>
</view>
<style>
.grid-table {
display: grid;
grid-template-rows: 40px 40px;
grid-template-columns: 80px 120px;
}
.cell {
border: 1px solid #ccc;
padding: 4px;
}
</style>
动态生成跨行跨列时，必须预计算每格的 grid-row 起止线号
如果你的数据来自后端，含 rowspan 和 colspan 字段（如：{ text: '合计', rowspan: 3, colspan: 2 }），不能直接把字段塞进 style——Grid 的起止线号是绝对位置，不是相对跨度。
需要先遍历数据，按行列索引推导出每个单元格实际占据的「行线范围」和「列线范围」：
- 维护一个二维数组
usedRows[i][j]记录第 i 行第 j 列是否已被占用 - 逐行扫描，对每个单元格，向右向下找连续空位，确定其
grid-row和grid-column值 - 特别注意：跨行单元格会“遮挡”下方行对应列的位置，后续单元格需跳过这些位置
这个过程没法靠 CSS 自动完成，必须在 JS 层做一次完整 layout 计算，再生成带具体 grid-row/grid-column 的 view 列表。
小程序中 grid 的兼容性陷阱：iOS 微信真机可能忽略 grid-row
部分低版本 iOS 微信（尤其 8.0.30 以下）对 Grid 子项的 grid-row 解析不稳定，表现为跨行单元格只显示在第一行，或整个 grid 崩溃为单列流式布局。
应对方式：
- 强制升级基础库检测：
uni.getSystemInfoSync().SDKVersion≥ '2.11.0' 才启用 Grid 方案 - 降级 fallback：检测失败时改用绝对定位 +
top/left手动排版（需预先知道每行高度、每列宽度） - 避免嵌套 Grid：外层用 Grid，内部单元格不要再用 Grid，否则某些安卓小程序会白屏
真正麻烦的不是怎么写，而是怎么让不同平台、不同系统版本都按你预期渲染——这需要你把 layout 计算逻辑抽成可测试函数，而不是堆在模板里靠猜。
