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