table-layout: fixed 是解决表格宽度问题的硬性前提，必须配合显式 width 声明（如 width: 100%）才生效；优先用 <colgroup><col> 控制列宽，再配合 word-wrap: break-word、max-width: 100% 等约束单元格内容，并确保父容器设置 overflow-x: auto 和 min-width: 0。
table-layout: fixed 是解决表格宽度超出问题的硬性前提，不加它，其他所有 width、max-width、word-break 都只是在修修补补，大概率失效。
必须先设 table-layout: fixed 并配 width
浏览器默认用 table-layout: auto，会反复扫描所有单元格内容再算列宽——内容一长，列就撑开，父容器再窄也拦不住。换成 fixed 后，列宽只看第一行或 <col> 的声明，行为可预测、性能也好。
但注意：table-layout: fixed 单独写没用，必须配合显式宽度声明：
-
table { table-layout: fixed; width: 100%; }—— 最常用，适配父容器 -
table { table-layout: fixed; width: 600px; }—— 固定像素，适合后台管理页 - 不写
width，fixed就不会真正生效，浏览器可能回退到auto
<col> 比 td 上设 width 更可靠
想精确控制每列宽度，优先用 <colgroup> + <col>。它语义清晰、兼容稳定，且不受后续内容干扰。
立即学习“前端免费学习笔记（深入）”；
错误写法：<td style="width: 120px">内容</td> —— 在 fixed 模式下只是“建议”，实际可能被忽略
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
正确写法：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 80px">
<col style="width: 25%">
<col style="width: 1fr"> <!-- Chrome/Firefox 支持，慎用于 IE 或旧 Safari -->
</colgroup>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>关键点：
-
<colgroup>必须紧贴<table>开始后、<thead>前 - 百分比总和别超 100%，否则触发横向滚动条
- IE9–IE11 对
<col>百分比支持不稳定，可补内联width到第一行<th>或<td>作兜底
单元格内容溢出要分情况处理
光控列宽不够，td 里文字、图片、<div> 还得单独约束，否则照样撑破：
- 普通文本：用
word-wrap: break-word（标准名）或overflow-wrap: break-word，避免word-break: break-all—— 它会在中文词中任意断开，体验差 - 不能换行的字段（如 ID、URL）：加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但前提是该td已有明确宽度（来自<col>或width） - 图片：
table td img { max-width: 100%; height: auto; }，绝不用width: 100%（会拉伸变形） - 嵌套
<div>：table td div { max-width: 100%; }，若需截断，还得加overflow: hidden和定位上下文（如position: relative）
父容器和响应式兜底不能漏
就算表格内部全调好了，父容器不守规矩，一样白干：
- 给表格直接父元素加
overflow-x: auto—— 小屏下出现横向滚动条，好过内容错位或布局崩塌 - 如果父容器是
flex或grid项，务必确认没漏设min-width: 0，否则表格拒绝收缩 - 避免用
padding百分比控制表格外边距，窄屏下 padding 突然变小，容易让表格贴边溢出 - 动态生成表格时（如 JS 渲染），确保
<col>在<tbody>前插入，且 DOM 已挂载完成再操作
最常卡住的不是“怎么写 CSS”，而是忘了 table-layout: fixed 的前提条件、放任图片无约束生长、或父容器脱离文档流后没做最小宽度保护。
