uni-app实现复杂的表格跨行跨列 uni-app中table布局实现方案-uni-app-PHP中文网

uni-app无原生table组件，因各平台对HTML表格渲染差异大；推荐用CSS Grid模拟，需预计算grid-row/grid-column实现跨行跨列，注意微信小程序基础库≥2.11.0及iOS兼容性问题。

uni-app实现复杂的表格跨行跨列 uni-app中table布局实现方案

uni-app 里没有原生 `table` 组件，别硬套 HTML 表格语义

uni-app 的 view 渲染层不支持

这类 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>