table-layout: fixed 是桌面端自适应表格的起点，需搭配 width: 100% 生效，列宽由首行 th 或 col 的 width 决定；推荐百分比 + min-width 组合控制列宽，并用 position: sticky 固定表头以保障可读性。
table-layout: fixed 是桌面端自适应的起点
桌面端窗口可自由缩放，table-layout: auto 默认行为会让列宽随内容剧烈波动——比如一列突然塞进长URL或JSON字符串，整行被撑开，横向滚动条意外出现。必须切换为 table-layout: fixed，否则后续所有宽度控制都不可靠。
-
table-layout: fixed要搭配width: 100%才生效，单独写无效 - 列宽由第一行
<th>或<col>的width决定，不是由内容决定 - IE8+、Chrome、Firefox、Edge 全支持；但 Outlook（用 Word 渲染引擎）会忽略该属性，邮件类场景慎用
- 如果第一行
<th>没设宽度，浏览器会按列数均分，容易导致关键列过窄
列宽分配：百分比 + min-width 组合更稳
纯百分比（如 width: 20%）在小窗口下可能把操作列压到 40px 宽，按钮文字全挤成“...”；纯像素（如 width: 120px）又会在大屏浪费空间。真实桌面应用需要弹性底线。
- 推荐写法：
<th style="width: 25%; min-width: 120px">—— 百分比主导，min-width防压缩 - 操作列、状态列等固定语义列，用
min-width锚定最小可用空间；主数据列用百分比留出伸缩余地 - 避免对
<td>单独设width，它会覆盖<th>定义的列基准 - 若列数多（≥6），建议用
colgroup集中管理：<col style="width: 15%; min-width: 100px">
内容溢出：break-word 不够，得加 white-space 控制
桌面端常展示日志、路径、base64 片段等无空格长文本，仅靠 word-break: break-all 会导致单词中间断开，可读性差；而 word-wrap: break-word 在某些旧版 Chrome 下不触发换行。
- 安全写法：
td, th { word-break: break-word; white-space: normal; } - 禁用
white-space: nowrap—— 它会让break-word失效 - 对代码类字段（如
class="code-cell"），可单独设white-space: pre-wrap保留缩进和换行 - 如果用了
table-layout: fixed，还要确保<table>有明确父容器宽度（如max-width: 100vw），否则100%会计算失败
窗口缩放时表头固定：sticky 比 JS 更轻量
桌面应用窗口拉高后，用户需要滚动查看大量数据，但表头消失会导致列含义丢失。用 JavaScript 监听 scroll 并动态添加 class 易卡顿，且需处理 resize 重算。
立即学习“前端免费学习笔记（深入）”；
- 直接写：
th { position: sticky; top: 0; background: #fff; z-index: 1; } - 必须给
<thead>设置display: table-header-group（默认值，一般不用显式写） - 注意：Firefox 对
sticky在<table>内的支持较晚（v91+），旧版本需降级为 JS 方案 - 不要给
<tbody>设height或max-height，这会破坏sticky的定位上下文
真正麻烦的不是怎么让表格占满窗口，而是当用户把窗口从 1920px 拉到 1280px 再拖回 2560px 时，列宽是否保持语义合理、文字是否始终可读、表头是否不跳动——这些细节没被 width: 100% 自动解决，得靠 fixed + min-width + sticky 三层锚定。
