最简单可靠的表格编号方式是直接在<td>或<th>中写死数字或用JavaScript动态生成；静态编号适用于内容固定的短表格，动态编号需绑定行生命周期，增删行后重新赋值确保序号连续。
直接在 <td> 或 <th> 标签里写数字或用 JavaScript 动态生成，是最简单也最可靠的编号方式；硬套 CSS 计数器或伪元素容易失控，尤其在表格重排、动态增删行时会错位或重复。
静态编号：直接写死在 HTML 里
适用于内容固定、不常变动的表格。编号就是普通文本，无逻辑依赖，渲染最稳。
-
<td>1</td>、<td>2</td>这样逐行手写，适合少于 10 行的场景 - 如果用了
<thead>/<tbody>，编号只放在<tbody>的<tr>中，避免把表头当数据编号 - 不要在
<th>里塞序号（比如“序号”列的表头写<th>1</th>），语义错误且易混淆
动态编号：用 JavaScript 在插入行时生成
表格支持增删行时，编号必须随行同步更新，否则会出现跳号、重复或错位。关键不是“显示数字”，而是“绑定到行生命周期”。
- 每次调用
tbody.insertRow(-1)添加新行后，立即在第一列insertCell(0)并赋值：cell.textContent = tbody.rows.length - 删除行时，**不手动改剩余行的编号**，而是遍历
tbody.rows重新赋值：for (let i = 0; i - 如果编号列是
<th>（比如首列为“序号”表头），确保它在<thead>里，而数据行里的对应单元格一律用<td>
别碰 CSS counter-increment 做表格编号
看似简洁，但实际掉坑率极高：表格行被 display: none 隐藏、用 innerHTML 批量替换 <tbody>、甚至只是拖拽排序，都会让计数器失步。
立即学习“前端免费学习笔记（深入）”；
- CSS 计数器依赖 DOM 节点顺序和可见性，而表格操作常绕过渲染树直改结构
-
::before伪元素无法被屏幕阅读器识别为有效内容，可访问性不达标 - 想“自动编号”不如老实用 JS 控制，两行代码比调试十分钟 CSS 计数器更省事
编号本质是数据序号，不是样式装饰。只要行存在，编号就得准；只要行删了，编号就得重排——这个逻辑只能由 JS 拿着 rows.length 和循环来守。
