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> 或 <code><col> 的 width 决定，不是由内容决定
• IE8+、Chrome、Firefox、Edge 全支持；但 Outlook（用 Word 渲染引擎）会忽略该属性，邮件类场景慎用
• 如果第一行 <th> 没设宽度，浏览器会按列数均分，容易导致关键列过窄 <h3>列宽分配：百分比 + min-width 组合更稳</h3> <p>纯百分比（如 <code>width: 20%）在小窗口下可能把操作列压到 40px 宽，按钮文字全挤成“...”；纯像素（如 width: 120px）又会在大屏浪费空间。真实桌面应用需要弹性底线。
  • 推荐写法：<th style="width: 25%; min-width: 120px"> —— 百分比主导，<code>min-width 防压缩
  • 操作列、状态列等固定语义列，用 min-width 锚定最小可用空间；主数据列用百分比留出伸缩余地
  • 避免对 <td> 单独设 <code>width，它会覆盖 <th> 定义的列基准 <li>若列数多（≥6），建议用 <code>colgroup 集中管理：<col style="width: 15%; min-width: 100px">

  内容溢出：break-word 不够，得加 white-space 控制

  桌面端常展示日志、路径、base64 片段等无空格长文本，仅靠 word-break: break-all 会导致单词中间断开，可读性差；而 word-wrap: break-word 在某些旧版 Chrome 下不触发换行。

  
  Html To Pdf
  使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
  下载
  • 安全写法：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> 有明确父容器宽度（如 <code>max-width: 100vw），否则 100% 会计算失败

    窗口缩放时表头固定：sticky 比 JS 更轻量

    桌面应用窗口拉高后，用户需要滚动查看大量数据，但表头消失会导致列含义丢失。用 JavaScript 监听 scroll 并动态添加 class 易卡顿，且需处理 resize 重算。

    • 直接写：th { position: sticky; top: 0; background: #fff; z-index: 1; }
    • 必须给 <thead> 设置 <code>display: table-header-group（默认值，一般不用显式写）
    • 注意：Firefox 对 sticky 在 <table> 内的支持较晚（v91+），旧版本需降级为 JS 方案 <li>不要给 <code><tbody> 设 <code>height 或 max-height，这会破坏 sticky 的定位上下文

      真正麻烦的不是怎么让表格占满窗口，而是当用户把窗口从 1920px 拉到 1280px 再拖回 2560px 时，列宽是否保持语义合理、文字是否始终可读、表头是否不跳动——这些细节没被 width: 100% 自动解决，得靠 fixed + min-width + sticky 三层锚定。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！