在小程序里做表格，这件事听起来简单，但实际动手时，你会发现它跟Excel完全是两码事。小程序的原生组件view、text、scroll-view并不直接支持“表格”这种结构，你需要用CSS的display: table系列属性来模拟。卡在“怎么让表格内容滚动”、“怎么让表头固定”这些细节上，今天我们就从零开始，把这件事彻底讲透。

小程序里没有

代码结构：

<view class="table">
  <view class="tr">
    <view class="th">姓名</view>
    <view class="th">年龄</view>
    <view class="th">城市</view>
  </view>
  <view class="tr">
    <view class="td">张三</view>
    <view class="td">28</view>
    <view class="td">北京</view>
  </view>
</view>

CSS（写在wxss里）：

.table { display: table; width: 100%; border-collapse: collapse; }
.tr { display: table-row; }
.th, .td { display: table-cell; padding: 10px; border: 1px solid #ccc; text-align: center; }
.th { background-color: #f0f0f0; font-weight: bold; }

这种做法的好处是结构清晰，跟HTML表格写法几乎一样。但有一个坑：小程序里display: table-cell不支持百分比宽度自适应，如果你给某个列设定了宽度，其他列可能会被挤变形。解决方法是用table-layout: fixed，然后在每个th或td上明确写width值，或者用flex布局代替table-cell，这会在后面讲到。

数据量一大，表格就需要滚动。小程序里scroll-view是滚动容器，但如果你把整个表格包在scroll-view里，表头也会跟着滚走，用户翻到下面时看不见列名，体验很差。

解决办法是：表头单独放一个view，内容区用scroll-view。关键点在于表头和内容列的宽度必须完全一致，否则会错位。

这里推荐一个实践过的方案：

<view class="table-wrapper">
  <view class="table-header">
    <view class="row">
      <view class="col col-name">姓名</view>
      <view class="col col-age">年龄</view>
      <view class="col col-city">城市</view>
    </view>
  </view>
  <scroll-view class="table-body" scroll-y style="height: 300px;">
    <view class="row" wx:for="{{list}}" wx:key="index">
      <view class="col col-name">{{item.name}}</view>
      <view class="col col-age">{{item.age}}</view>
      <view class="col col-city">{{item.city}}</view>
    </view>
  </scroll-view>
</view>

CSS里，.row用display: flex，每个.col用flex: 1或者固定宽度。注意：表头和内容行的.col宽度必须一致，比如都写.col-name { width: 100px; }，或者都用flex: 1。如果内容行因为文字过长被撑开，可以加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;来截断。

真正让人头疼的是合并单元格（colspan/rowspan）。小程序里没有原生支持，你需要手动用view的嵌套和样式来模拟。

比如一个跨两列的标题行：

<view class="tr">
  <view class="th" style="flex: 2;">基本信息（合并两列）</view>
  <view class="th" style="flex: 1;">操作</view>
</view>

这里用flex比例来控制宽度，flex: 2的列占据两倍的宽度，看起来就像合并了两列。如果要跨行合并，需要把被合并的行隐藏掉，并在第一行里用一个高度更大的view来模拟。比如第一行有“姓名”跨两行，第二行的“姓名”单元格直接不写，第一行的“姓名”单元格用height: 100px（假设每行50px）来撑出两行的高度。

这种方式比较笨，但小程序里没有更好的办法。如果你需要频繁做复杂表格，可以考虑用第三方组件库，比如WeUI或Vant Weapp，它们提供了相对完善的表格组件，内部已经处理了合并和滚动。不过组件库也有缺点：样式定制起来比较麻烦，有时候为了改一个边框颜色要覆盖好几层样式。

当表格有几百行数据时，直接用wx:for渲染会导致页面卡顿。小程序里setData传输大量数据也很慢。

分段渲染是个好办法。比如只渲染当前可视区域内的20行，滚动时动态替换数据。这其实就是虚拟列表的思路。小程序官方提供了recycle-view组件（在miniprogram-recycle-view扩展包里），可以专门用来做长列表。用法大致是：

<recycle-view class="table-body" id="recycle" height="{{scrollViewHeight}}">
  <view slot="header">这里是表头</view>
  <view wx:for="{{recycleList}}" wx:key="index" class="row">...</view>
</recycle-view>

注意，recycle-view要求每个列表项高度固定，否则会计算错误。如果你的表格行高不固定（比如有折行文字），可以用recycle-view的itemSize函数动态返回高度，但性能会下降一些。

另一个技巧是：用wx:if控制表格的显示时机。如果表格不是页面加载时就必须展示，可以等页面其他内容渲染完成后再展示表格，避免同时渲染大量节点导致白屏。

很多小程序表格不仅仅是展示数据，还要支持编辑。比如在表格里直接修改某个字段。这需要把view换成input组件：

<view class="td">
  <input value="{{item.name}}" bindinput="onNameInput" data-index="{{index}}" />
</view>

但这里有个问题：input在scroll-view里可能会被遮挡，尤其是当键盘弹起时，scroll-view不会自动滚动到输入位置。解决方案是监听bindfocus事件，手动调用wx.createSelectorQuery获取输入框的位置，然后用scroll-view的scroll-into-view属性滚动到该行。

更稳妥的做法是把编辑放在弹窗里，表格只做展示，点击某行弹出一个表单来修改。这样既避免了输入框在滚动容器里的各种bug，也符合移动端操作习惯。

我见过很多开发者纠结到底用哪种方式来模拟表格。简单对比一下：

display:table 的优点是语义清晰，跟HTML表格写法一致，适合有后端开发经验的人。缺点是控制列宽比较麻烦，不支持响应式，在小程序里偶尔会有渲染错位的问题。

flex布局 的优点是灵活，列宽可控（用flex:1或百分比），支持响应式，滚动时不容易错位。缺点是嵌套结构稍微复杂一点，合并单元格需要额外处理。

我的建议是：简单表格（只有几列，不合并）用flex，复杂表格（合并多行多列）用display:table配合固定宽度。不要在一个页面里混用两种方式，否则后期维护会让人头大。

表格做出来之后，用户可能会想把数据导出成图片或Excel。小程序里导出Excel比较麻烦，需要借助后端接口生成文件。但导出图片可以用wx.canvasToTempFilePath把表格区域绘制到canvas上，然后保存到相册。

具体做法：用wx.createSelectorQuery获取表格区域的宽高，然后创建一个离屏canvas，用draw方法逐行绘制文字和线条。注意canvas的绘制坐标需要跟实际表格的像素位置对应，如果表格有滚动，需要把滚动偏移量也计算进去。

这个功能比较重，一般只在企业应用里才会用到。如果你只是做个简单的记账或打卡表格，没必要加这个功能，反而会增加包体积。

最后提醒一点：小程序里表格的边框线在真机上可能会显示不一致，尤其是1px的细线，有些机型会变成2