小程序中<web-view>表格无法纯CSS自适应，根本原因是iOS微信WebView对table-layout和overflow-x支持不一致且禁用横向滚动手势，需服务端预处理+前端降级控制。
小程序里用 <web-view> 加载 HTML 表格，根本没法靠纯 CSS 自适应——因为 iOS 微信 WebView 的渲染引擎（UIWebView/WKWebView）对 table-layout: fixed 和 overflow-x 的支持不一致，且默认禁用横向滚动手势。
为什么 <web-view> 里的表格总被压缩或溢出
不是你 CSS 写得不对，而是微信小程序的 <web-view> 容器本身有两层限制：一是它默认把网页缩放到 fit-content 模式（类似 viewport 的 initial-scale=1 + user-scalable=no），二是 iOS 端会拦截横向 touchmove 事件，导致外层 div[overflow-x:auto] 失效。常见现象包括：td 文字强制换行、列宽崩塌、滑动卡顿、点击单元格失焦。
-
table-layout: fixed在 iOS<web-view>中部分生效，但若第一行<th>没设width，仍会回退到 auto 计算 - 给
<table>设width: 100%没用——父容器（<web-view>内部 viewport）宽度是固定的，不是动态响应的 - 加
touch-action: manipulation只对按钮有效，对表格滚动无效
真正能落地的适配方案：服务端预处理 + 前端降级控制
别在小程序端硬扛响应式逻辑。正确路径是：后端生成 HTML 时就做结构判断，前端只负责加载和兜底。
- 后端识别请求头
User-Agent: MiniProgram，对含表格的 HTML 做两件事：
— 若列数 ≤ 3，直接转为语义化卡片结构（每行<tr>→<section>，每个<td>带data-label）
— 若列数 ≥ 4，保留<table>，但外层包一层<div class="webview-table-wrapper">并内联关键样式 - 前端在
<web-view>加载完成时注入 JS（通过bindmessage或postMessage），检查是否 iOS，并动态加style="-webkit-overflow-scrolling: touch"到 wrapper 上 - 必须删掉所有
white-space: nowrap和固定font-size，改用rem或vw单位，否则小屏文字糊成一团
<rich-text> 渲染简单表格的边界与坑
如果你的表格只是几行几列、无合并单元格、无复杂样式，<rich-text> 是更轻量的选择，但它对表格的支持极有限：
立即学习“前端免费学习笔记（深入）”；
- 只认
<table>、<tr>、<td>、<th>四个标签，<colgroup>、<caption>全部丢弃 - CSS 只支持内联 style，且仅识别
width、text-align、padding等基础属性，border-collapse无效 - Android 端会自动给
<table>加display: block，iOS 则保持table，导致两端列宽不一致 - 实测安全写法：
<table style="width:100%;table-layout:fixed"><tr><th style="width:30%">姓名</th><th style="width:40%">状态</th></tr></table>
mp-html 表格渲染的隐藏前提
如果你选了 mp-html 这类第三方组件库，它的表格能力不是“开箱即用”，而是依赖两个隐性条件：
- 必须关闭
mp-html的lazyLoad选项——否则表格节点可能被延迟解析，导致首次渲染错位 - 要手动传入
options.scrollTable = true，否则即使写了overflow-x: auto也无滚动条 - 它的
table节点转换逻辑会过滤掉所有style中带!important的声明，所以自定义样式别加这个 - 如果表格里有
<input>或<select>，需额外配置editable: true，否则这些控件不可交互
最常被忽略的一点：小程序里没有“页面重绘”概念，表格 DOM 变更后不会自动重新计算布局。任何动态插入行或修改列宽的操作，都必须显式调用 setData 触发 mp-html 的重新解析，或者手动 triggerResize()。
