width="100%"常不生效，因父容器缺明确宽度且未设table-layout: fixed；必须同时满足父宽可计算、table加width和fixed布局、col元素正确声明列宽三条件。
为什么 width="100%" 常常不生效
表格写 width="100%" 或 style="width: 100%" 后仍没占满父容器，大概率是因为两个硬性条件没满足：父容器没明确宽度，且没启用 table-layout: fixed。浏览器默认用 table-layout: auto，此时列宽由内容决定，100% 只是“在不确定的父宽基础上算一个百分比”，结果退化为 auto。
- 父容器必须有可计算宽度，比如
div上写了width: 100%、max-width: 1200px或固定像素值 -
<table>必须同时声明width: 100%和table-layout: fixed，缺一不可 - 仅靠
<th>或<td>上的width属性无法触发自适应——它们在auto模式下会被忽略
必须用 <col> 定义列宽才稳定
<col> 是专为列级控制设计的语义元素，优先级高于单元格上的任何 width 声明，且不依赖首行内容是否渲染完成。写错位置或单位混用，会导致部分列失效。
-
<col>必须紧接在<table>开始标签后、<thead>前 - 支持
%、px、em，不支持fr - 没写
<col>的列，会 fallback 到第一行对应<th>的width；若也没写，就坍缩成最小内容宽
正确结构示例：
<table style="width: 100%; table-layout: fixed;"> <col width="120"> <col width="30%"> <col width="20%"> <thead><tr><th>序号</th><th>名称</th><th>状态</th></tr></thead> </table>
内容溢出时必须配对 white-space 和 overflow
table-layout: fixed 锁死了列宽，但长文本、URL、连续无空格英文仍会撑破或溢出单元格。单靠 width 无法约束视觉表现。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 自动换行：
word-break: break-word;或overflow-wrap: break-word;，同时确保white-space: normal; - 图片破坏列宽：
img { max-width: 100%; height: auto; } - 边框影响总宽：加
box-sizing: border-box;让width: 100%包含边框和 padding
移动端全屏表格要防滚动条和地址栏干扰
在 iOS Safari 上，100vw 会包含垂直滚动条宽度（约 17px），导致表格实际超出视口、触发横向滚动；地址栏收起时 100vh 不更新，造成底部留白。纯 CSS 难以完全规避。
- 表格容器外层加
overflow-x: auto，允许水平滚动查看全部列（尤其适合列数多的报表） - 如需真正“贴物理屏幕”，需 JS 补偿：
element.style.height = window.innerHeight + 'px'，并监听resize、scroll、orientationchange节流调用 - 不要在
DOMContentLoaded里直接设高——此时window.innerHeight可能还没反映地址栏真实状态
最易被忽略的不是怎么写 width，而是忘了父容器有没有宽度、table-layout 没设、以及 <col> 放错了位置——这三个点卡住绝大多数人。
