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> 必须同时声明 <code>width: 100% 和 table-layout: fixed，缺一不可
• 仅靠 <th> 或 <code><td> 上的 <code>width 属性无法触发自适应——它们在 auto 模式下会被忽略

  必须用 <col> 定义列宽才稳定

  <col> 是专为列级控制设计的语义元素，优先级高于单元格上的任何 width 声明，且不依赖首行内容是否渲染完成。写错位置或单位混用，会导致部分列失效。

  • <col> 必须紧接在 <table> 开始标签后、<code><thead> 前 <li>支持 <code>%、px、em，不支持 fr
  • 没写 <col> 的列，会 fallback 到第一行对应 <th> 的 <code>width；若也没写，就坍缩成最小内容宽

    正确结构示例：

    

    html-to-pptx

    将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

    下载

    序号	名称	状态

    内容溢出时必须配对 white-space 和 overflow

    table-layout: fixed 锁死了列宽，但长文本、URL、连续无空格英文仍会撑破或溢出单元格。单靠 width 无法约束视觉表现。

    • 单行截断：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> 放错了位置——这三个点卡住绝大多数人。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！