HTML模板仅负责结构与样式，数据处理需JS和CSS协同；table-layout: fixed需配合width和列宽声明才生效；单元格换行、图片缩放、动态渲染、移动端适配及可编辑表格均有特定实现要点。
HTML 模板本身不处理表格数据，它只负责结构和样式；数据填充、排序、响应式适配、编辑等行为必须靠 JavaScript 和 CSS 协同完成——模板只是容器，不是引擎。
table-layout: fixed 为什么加了还溢出
常见错误是只设了 table-layout: fixed，但漏掉两个必要条件：一是 width: 100%（或具体像素宽），二是至少一个 <th> 或 <col> 带显式宽度（如 width: 20%）。三者缺一，浏览器仍按默认的 auto 模式计算列宽，长文本、URL、图片照样撑破。
-
white-space: normal和word-break: break-word必须写在<td>或<th>上，写在<table>上无效 - 单元格内嵌了
<div>或<span>？它们默认继承white-space: nowrap，得单独重置 - 图片要加
img { max-width: 100%; height: auto; }，否则无视父容器约束
动态渲染表格时 tbody 为空却报错
用 JS 渲染数据前，<tbody> 留空是对的，但容易踩三个坑：
-
document.querySelector('#my-table tbody')返回 null —— 检查id是否拼错，或脚本执行时机早于 DOM 加载（改用DOMContentLoaded或把 script 放在</body>前） - 遍历
<th>时用了document.querySelectorAll('th')，结果拿到所有表格的表头，应限定作用域：document.querySelectorAll('#my-table th') - 取字段值时用
row[th.textContent]而非row[th.dataset.field]，导致大小写/空格/中文名全不匹配
推荐初始化写法：<th data-field="user_name">用户名</th>，JS 侧统一读 th.dataset.field。
立即学习“前端免费学习笔记（深入）”；
移动端列数 ≥ 4 时硬撑表格结构很危险
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。此时应主动降级为卡片堆叠：
- 给每行
<tr>加data-label，例如<tr data-label="订单 #12345"> - 小屏下用媒体查询隐藏
<thead>和原始<th>，改用tr:before { content: attr(data-label) ": "; } - 每个
<td>设为display: block，再用td:before { content: attr(data-label) ": "; }补字段名（需提前在<td>上加data-label） - 别在 Outlook 等邮件客户端用
table-layout: fixed——它用 Word 渲染引擎，完全不认这个属性
可编辑表格千万别用 contenteditable
contenteditable="true" 看似省事，实际会破坏语义、焦点跳转和输入控制。真正可用的方案是 JavaScript 动态替换：
- 点击
<td>时，用input/textarea/select替换其内容，并存原始值：cell.dataset.originalValue = cell.textContent - Enter 提交前必须
event.preventDefault()，否则触发表单提交刷新页面 - ESC 取消时恢复
dataset.originalValue，并移除表单控件、重新聚焦原<td> - Tab 跳转需手动计算下一个可编辑单元格位置，
focus()过去并自动进入编辑态 - 关键难点不在替换动作本身，而在光标管理、数据一致性校验、不同输入类型下的边界处理（比如数字列粘贴带单位的字符串）
真正的复杂点从来不是“怎么让单元格变可编辑”，而是“怎么让编辑过程不丢状态、不污染数据、不打断用户直觉”。
