可靠控制表格宽度需三者协同：设置table的width和table-layout:fixed，用<colgroup><col>定义列宽，并为td/th添加white-space:nowrap等防护样式。
直接写 width 属性在 <table> 上，大多数时候看似生效，实则不可靠——它只是“目标宽度”，不是强制约束，内容一长就破防。
为什么 width="100%" 有时像没写？
根本原因是：百分比宽度需要参照物。width="100%" 是相对于父容器计算的，但若父容器（比如 <div>）没设宽、或本身是 display: inline、或被 flex/grid 布局影响，那 100% 就失去意义，最终退化为自动撑开。
- 检查父元素是否设置了明确的
width、max-width或inline-size - 避免把
<table>放在display: flex容器的子项里——flex 会忽略width，改用flex-basis -
width="100%"在<td>里无效，只对<table>、<col>或块级容器有意义
table-layout: fixed 是宽度可控的前提
默认的 table-layout: auto 会让浏览器先按内容算列宽，再缩放整张表去“凑”你写的 width，结果常是文字换行、单元格挤压、比例失真。设成 fixed 后，列宽才真正由你定义的值决定。
- 必须配合显式列宽定义才起效——单独加
table-layout: fixed不会改变任何东西 - 列宽优先级：<col> > <th>/<td> 的
width属性 > CSSwidth（但<col>最稳定） -
<colgroup>必须紧贴<table>开始后、且在<thead>之前，顺序错一位，整列就偏移
用 <col> 精确控制每列宽度
这是唯一能绕过内容干扰、实现可靠列宽的方式。它不渲染、不占 DOM 深度，语义清晰，兼容性好。
立即学习“前端免费学习笔记（深入）”；
-
<col style="width: 200px">：固定像素，适合关键列（如 ID、时间） -
<col style="width: 30%">：百分比基于<table>总宽，不是父容器 - 不要混用
width属性和style="width"在同一列上，CSS 优先级可能覆盖 HTML 属性 - 想让某列“剩余空间自适应”？用
<col style="width: 1fr">（仅现代浏览器支持，非标准，慎用）
防止内容撑破列宽的配套操作
哪怕列宽设得再准，一段无空格的长 URL 或中文连续字符仍可能强行突破。必须加防护。
- 给
<td>和<th>加white-space: nowrap，阻止换行 - 加
overflow: hidden切掉溢出部分；若需提示，再加text-overflow: ellipsis - 避免在
<td>里嵌套<div>、<p>等块级元素——它们会破坏table-layout: fixed的列宽约束 -
box-sizing: border-box推荐统一加在table, td, th上，避免边框/内边距额外增加宽度
真正可靠的表格宽度控制，从来不是单点设置，而是 table { width; table-layout: fixed } + <colgroup> + 单元格样式三者咬合。漏掉任一环，都可能在某个用户、某条数据、某台设备上突然失效。
