web-view中H5表格宽度失效需用table-layout: fixed+colgroup组合解决，嵌套表格需外层td加min-width: 0，响应式用100vw和媒体查询兜底，并删除重复viewport声明。
web-view里H5表格宽度不生效的常见表现
直接在H5页面里写 <table width="100%"> 或 style="width: 100%"，在小程序 <web-view> 中经常失效：表格被压缩、文字换行异常、横向滚动条出现，甚至整张表只显示一列。这不是CSS没加载，而是微信iOS/Android WebView对表格布局的解析差异叠加了父容器约束导致的。
必须用 table-layout: fixed + <colgroup> 组合
单纯设 width 属性或CSS width 在 <web-view> 的WebView中不可靠，尤其iOS。真正起效的是显式控制列宽计算逻辑：
-
table-layout: fixed必须加在<table>上，否则浏览器仍按内容动态撑开列宽 -
<colgroup>要紧贴<table>开始后、<thead>前，顺序错一个位置就无效 - 每列用
<col style="width: 20%">或<col width="120">显式声明，百分比总和建议 ≤ 98%，留2%防四舍五入溢出 - 避免在
<td>上单独设width，它会被<col>覆盖，且部分安卓WebView会忽略
示例：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 30%">
<col style="width: 40%">
<col style="width: 30%">
</colgroup>
<thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
<tbody><tr><td>data</td><td>data</td><td>data</td></tr></tbody>
</table>
嵌套表格时 <td> 内容撑不开父容器的问题
当H5页面里有嵌套表格（比如 <td> 里再放一张 <table>），外层 <td> 默认按内容最小宽度收缩，导致内层表格被挤压变形。解决方法不是给内层表设宽度，而是约束外层单元格：
立即学习“前端免费学习笔记（深入）”；
- 给外层
<td>加style="width: 100%; min-width: 0;"——min-width: 0是关键，否则iOS WebView会强制保持最小宽度 - 内层
<table>仍需配table-layout: fixed和<colgroup>，不能依赖父<td>自动伸展 - 避免用
white-space: nowrap在嵌套表格的<td>上，它会阻断宽度继承，引发横向滚动
响应式场景下表格宽度的兜底处理
在小程序 <web-view> 中，H5页面无法直接读取小程序窗口尺寸，所以不能靠 window.innerWidth 动态设宽。稳妥做法是：
- 用
width: 100vw替代width: 100%，绕过父容器padding干扰（100%是相对父元素，100vw是相对视口） - 加媒体查询：针对小屏加
@media (max-width: 480px) { table { display: block; overflow-x: auto; } }，把表格转为可横向滚动的块 - 慎用
fr单位（如width: 1fr），微信WebView支持度差，iOS 15以下基本不识别 - 所有宽度值尽量用
%或vw，避免固定px——小程序不同机型屏幕宽度差异大，硬编码容易在iPhone SE或折叠屏上错位
最易被忽略的一点：微信 <web-view> 默认会给内嵌页面套一层 viewport meta，但如果你的H5页面自己写了 <meta name="viewport" content="...">，两个 viewport 冲突会导致宽度计算彻底紊乱。检查H5源码，删掉重复的 viewport 声明，只保留小程序自动注入的那个。
