web-view中h5表格宽度失效需用table-layout: fixed+colgroup组合解决，嵌套表格需外层td加min-width: 0，响应式用100vw和媒体查询兜底，并删除重复viewport声明。
web-view里H5表格宽度不生效的常见表现
直接在H5页面里写 <table width="100%"> 或 <code>style="width: 100%"，在小程序 <web-view></web-view> 中经常失效：表格被压缩、文字换行异常、横向滚动条出现，甚至整张表只显示一列。这不是CSS没加载，而是微信iOS/Android WebView对表格布局的解析差异叠加了父容器约束导致的。
必须用 table-layout: fixed + <colgroup></colgroup> 组合
单纯设 width 属性或CSS width 在 <web-view></web-view> 的WebView中不可靠，尤其iOS。真正起效的是显式控制列宽计算逻辑：
-
table-layout: fixed必须加在<table> 上，否则浏览器仍按内容动态撑开列宽 <li> <code><colgroup></colgroup>要紧贴<table> 开始后、<code><thead> 前，顺序错一个位置就无效 <li>每列用 <code><col style="width: 20%">或<col width="120">显式声明，百分比总和建议 ≤ 98%，留2%防四舍五入溢出 - 避免在
<td> 上单独设 <code>width，它会被<col>覆盖，且部分安卓WebView会忽略示例：
A B C data data data 嵌套表格时
<td> 内容撑不开父容器的问题 <p>当H5页面里有嵌套表格（比如 <code><td> 里再放一张 <code><table>），外层 <code><td> 默认按内容最小宽度收缩，导致内层表格被挤压变形。解决方法不是给内层表设宽度，而是约束外层单元格： <ul><li>给外层 <code><td> 加 <code>style="width: 100%; min-width: 0;"——min-width: 0是关键，否则iOS WebView会强制保持最小宽度 - 内层
<table> 仍需配 <code>table-layout: fixed和<colgroup></colgroup>，不能依赖父<td> 自动伸展 <li>避免用 <code>white-space: nowrap在嵌套表格的<td> 上，它会阻断宽度继承，引发横向滚动 <h3>响应式场景下表格宽度的兜底处理</h3> <p>在小程序 <code><web-view></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></web-view>默认会给内嵌页面套一层 viewport meta，但如果你的H5页面自己写了<meta name="viewport" content="...">，两个 viewport 冲突会导致宽度计算彻底紊乱。检查H5源码，删掉重复的 viewport 声明，只保留小程序自动注入的那个。 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
