表格 width: 100% 溢出父容器的根本原因是 table-layout: auto 下列宽由内容决定，需改用 table-layout: fixed 并配合 width: 100%、<col> 定义列宽及单元格 max-width: 0 + word-break: break-word 才能真正约束。
直接写 width: 100% 却撑出父容器，不是 CSS 写错了，而是表格布局机制在“暗中作祟”——table-layout: auto 下，列宽由内容决定，100% 只作用于表格外框，内部列一撑就溢出。
为什么 width: 100% 会让 table 超出父容器
浏览器对 <table> 的默认布局是 table-layout: auto，它会等所有单元格内容（尤其是长英文、URL、未换行文本）加载完再动态计算列宽。哪怕你写了 width: 100%，也只是把“最终算出来的总宽度”拉到父容器 100%，而这个“最终宽度”本身可能远超父容器——比如一列塞了 50 个连续字母，浏览器硬给它留出空间，整行就横向突破。
- 父容器没设
overflow: hidden或overflow-x: auto，溢出部分直接显示出来 -
<th>或<td>上的width属性在auto模式下被忽略，不起作用 - 用了
padding或border但没设box-sizing: border-box，实际宽度 = content + padding + border
table-layout: fixed 必须配合 width: 100% 和显式列宽
只有三者同时存在，才能真正让表格“听话地占满且不溢出”。table-layout: fixed 不是开关，是切换布局逻辑：它只读第一行 <th> 或 <col> 的 width 值，不再等全部内容。
-
<table>必须有width: 100%（CSS）或width="100%"（HTML 属性），否则fixed不生效 -
<col>要紧贴<table>开始标签后、<thead>前，例如：<table style="width: 100%; table-layout: fixed;"> <col width="25%"> <col width="25%"> <col width="50%"> <thead>...
- 避免混用
px和%列宽，百分比列加起来不必等于 100%，浏览器会自动归一化；但全用px时，总和超过父宽仍会溢出
内容溢出必须作用在 <td> 和 <th> 上
word-break: break-word 或 overflow-wrap: break-word 这类规则，加在 <table> 上无效。它们得落在单元格内部，且需配合 max-width 才能触发换行。
立即学习“前端免费学习笔记（深入）”；
- 给所有
<td>和<th>加：td, th { word-break: break-word; overflow-wrap: break-word; max-width: 0; /* 强制启用换行 */ } - 如果单元格里有图片或 inline-block 元素，额外加
white-space: normal - 避免对
<table>设min-width，它会覆盖 100% 行为，导致小屏下强制横向滚动
父容器高度/宽度未继承是隐藏根源
即使表格样式全对，若父 <div> 自身没明确宽度，width: 100% 就失去参照——它的“100%”算出来可能是 0 或一个极小值，后续所有布局都失准。
- 从根开始重置：
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } - 包裹表格的
<div>必须有明确尺寸，例如：style="width: 100%; height: 400px;"或用 flex：display: flex; flex-direction: column; - 在 React/Vue 中，组件默认不继承父尺寸，需显式传
style={{ width: '100%' }}或用 class 绑定
最常被跳过的其实是 <col> 的位置和 max-width: 0 在单元格上的组合——前者让 fixed 布局真正启动，后者让 break-word 生效。漏掉任意一个，width: 100% 都只是表面功夫。
