表格列宽百分比生效需满足三个前提：父容器有明确宽度、table-layout: fixed 声明、配合 width: 100%；否则列宽由内容决定， 设置无效，且需注意边框、溢出、响应式适配等问题。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

直接给 <table> 写 <code>width="100%" 或 style="width: 100%" 不会自动让列按百分比分配——90% 的失败都卡在这一步：表格自身没撑开，百分比列宽根本无参照。

为什么 width: 100% 常常不生效

百分比宽度永远相对于父容器计算。如果父容器（比如 <div>）没明确宽度，<code>width: 100% 就是“100% 的 undefined”，结果通常是内容最小宽度。

• 默认有 margin，且未设 width，导致子级 100% 计算失准
• 移动端缺失 <meta name="viewport" content="width=device-width">，iOS Safari 按 980px 渲染，100% 也按错值算
• <table> 是替换元素，其默认 <code>display: table 对 width 的响应不如 block 元素稳定

  table-layout: fixed 是列宽可控的前提

  不加这个声明，浏览器用 table-layout: auto —— 它会扫描所有行所有单元格内容，找出每列最大宽度再分配，<col width="30%"> 这类设置直接被无视。

  • 必须和 width: 100% 配合使用，单独设 fixed 无效
  • 列宽只读第一行 <th> 或 <code><col> 的 width 值，后续行内容再长也不会撑开
  • 推荐用 <colgroup> <col width="25%"> <col width="75%"> </colgroup>，语义清晰、样式隔离，避免 JS 动态操作 <th> 导致列宽错乱 <li>避免混用单位：<code><col width="200px"> <col width="50%"> 可能触发回退到 auto 行为

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

  table-layout: fixed 下，长 URL、连续英文、未换行文本会直接突破列宽，仅靠 width 无法约束视觉表现。

  立即学习“前端免费学习笔记（深入）”；

  • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（<td> 默认是 <code>table-cell，可直接用）
  • 自动换行：word-break: break-word; 或 overflow-wrap: break-word;，同时确保 white-space: normal;
  • 图片破坏列宽？加 img { max-width: 100%; height: auto; }
  • 边框计入总宽：启用 border-collapse: collapse 后，记得加 box-sizing: border-box;，否则列宽加起来 100% + 边框 = 溢出

  窄屏下别硬撑，滚动或堆叠更实际

  纯 CSS 强行让 8 列表格在 320px 屏上“自适应列宽”，大概率导致文字挤成一团、换行失控——这不是 CSS 失效，而是表格语义本身不匹配窄屏交互逻辑。

  • 小屏优先考虑加 overflow-x: auto; 包裹表格，让用户横向滑动查看完整数据
  • 或用媒体查询把表格转成卡片式列表：display: block + <dl></dl> 结构，每行变一个块，可读性远高于压缩列宽
  • min-width 在 fixed 模式下常被跳过，真要保底线宽度，得在 <col> 上用 style="min-width: 120px"（部分旧 WebView 支持不稳定）

  最易被忽略的其实是第一行：漏写 <col> 的列，宽度由第一行对应 <th> 的 <code>width 决定；如果都没写，列宽会坍缩成最小内容宽——调试时多看一眼 DOM 中 <col> 是否生效，比反复调 td 的 width 有效得多。