table-layout: fixed 需同时满足显式 width、至少一列设宽、禁用 white-space: nowrap 才生效；邮件客户端不支持需降级；大数据量表格应局部渲染、事件委托、金额整数存储防浮点误差。

table-layout: fixed 必须显式声明且配齐三要素

不设 table-layout: fixed，浏览器默认用 auto 模式逐行扫描所有 内容算列宽，500 行表格光这一步就卡主线程 150ms+。但只写这个属性没用，它生效依赖三个硬性条件：

• 必须有显式 width（如 style="width: 100%" 或 width="600"），不能是 auto 或未设置
  至少一列需通过
  指定宽度，例如 ； 插入 DOM：
  • 分页数据用 data.slice(start, end) 提前截取，map() 生成纯字符串片段，再一次性赋给 tbody.innerHTML
  • 事件绑定走委托：监听 tbody 的 click，用 e.target.closest('tr') 定位目标行
  • 若用 Vue/React，仍需保证虚拟 DOM 只渲染当前页片段，不能把全量数据映射为全量

  金额计算必须整数存储，防浮点误差

  前端直接用小数做加减乘除，极易出现 0.1 + 0.2 === 0.30000000000000004 这类问题。航空票务、财务报表等场景必须规避：

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  • 所有金额以“分”为单位存为整数（如 ¥1299.00 存为 129900）
  • 显示时再转回小数：(value / 100).toFixed(2)，注意 toFixed 返回字符串
  • 大宗计算可用 BigInt：Number((BigInt(a) + BigInt(b)) / 100n)，但需确保输入已是整数分

  最易被忽略的是：后端返回的金额字段若带小数，前端必须立刻乘 100 并 Math.round，不能留到计算时再转——浮点误差会在第一次运算就污染整个链路。

  或	上的 width 属性会被忽略	不能设 white-space: nowrap，否则内容溢出而非压缩，列宽控制失效 Outlook 等邮件客户端完全不支持该属性，若用于 HTML 邮件，需提前降级处理。 动态更新别碰 innerHTML，改用 dataset + 单元格级替换 一次刷新涉及上百单元格时，整表 innerHTML = newHTML 会触发完整重排重绘，界面明显卡顿。真实生产环境应只更新变动单元格： 在	上用 data-price="1299"、data-updated="1715643210" 存原始值和时间戳，JS 对比新旧值再决定是否更新 批量 DOM 操作先 append 到 DocumentFragment，最后一次性替换 tbody 下对应子节点 避免在循环中反复读取 offsetHeight 等布局属性；若需重算行高，统一放进 requestAnimationFrame 回调 大数据量下局部渲染比隐藏更有效 用 display: none 或 visibility: hidden 控制表格行显隐毫无性能改善——DOM 节点仍在内存里，浏览器照常计算布局。真正有效的做法是只把当前页的

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