HTML表格无原生自动序号功能，需用CSS计数器（静态、导出友好）、JavaScript动态更新（增删行适用）或数据层预计算（分页场景），三者选型取决于响应需求、框架及导出要求。
HTML 表格本身不提供原生的「自动序号列」功能，table 是纯结构容器，序号必须靠外部逻辑控制——要么用 CSS 计数器（无 JS、静态渲染友好），要么用 JavaScript 动态写入（适合增删行场景），要么在数据层预计算（如分页表格中用 serialNumber(pageIndex, pageSize, index)）。选哪种，取决于你是否需要响应式更新、是否用框架、是否导出 PDF。
用 CSS counter 实现首列序号（无 JS，兼容性好）
这是最轻量、语义清晰、且支持打印/PDF 导出的方案。关键不是给每行加数字，而是让浏览器自动计数并注入到第一列单元格前。
- 必须给
table或tbody设置counter-reset: row;，否则计数器不会初始化 - 对每一行（
tr）设置counter-increment: row;，每次渲染就 +1 - 用
td:first-child::before插入编号，注意content: counter(row) ". "中的空格会被压缩，如需中文“第X项”，写成content: "第" counter(row) "项"即可 - IE11 支持
counter-reset和counter-increment，但不支持counter-set，所以别试图用它设初始值为 100
table { counter-reset: row; }
tbody tr { counter-increment: row; }
tbody tr td:first-child::before { content: counter(row) ". "; font-weight: bold; }
用 JavaScript 动态重写序号（适合增删行）
当表格支持添加/删除行，或数据由 AJAX 加载时，CSS counter 无法感知 DOM 变化，必须手动触发重排。这时直接操作 cells[0].innerHTML 最直接。
- 不要只在页面加载时跑一次，要把重写逻辑封装成函数，比如
updateSerialNumbers()，并在appendChild、deleteRow、insertRow后调用 - 遍历
table.rows比用querySelectorAll('tr')更可靠，避免误选表头或脚注行 - 如果表格有分页，别用
i + 1，得结合当前页码和每页条数，例如调用serialNumber(currentPage, pageSize, i) - 注意：直接改
innerHTML会清空该单元格内所有事件监听器和子元素，如需保留结构，改用textContent或创建span包裹
function updateSerialNumbers(tableId) {
const table = document.getElementById(tableId);
for (let i = 0; i < table.rows.length; i++) {
table.rows[i].cells[0].textContent = i + 1;
}
}
Vue/React 等框架里怎么处理（避免重复渲染）
框架里序号本质是派生状态，不该存进 data 或 state，而应实时计算。硬编码 {{ index + 1 }} 看似简单，但在列表过滤、排序、分页后容易错乱。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Vue 中，
v-for的index是渲染顺序索引，不是数据真实位置；如果用了filter或sort，要确保序号反映的是当前视图顺序，而非原始数组下标 - React 中同理，别把
index当唯一 ID 用，更别拿它当序号源；推荐在 map 回调里用idx + 1，但仅限于不可变列表 - Ant Design 的
Table组件没有内置序号列，官方推荐用rowSelection或自定义columns[0].render返回(text, record, index) => index + 1—— 注意这里index是当前页内的序号，不是全局 - 如果要做全局序号（比如第 127 条），必须传入分页参数，调用类似
serialNumber(currentPage, pageSize, index)的函数
为什么不用 <ol><li> 套表格行？
有人想用 ol 包裹 tr，或者把整张表塞进 li 里——这违反 HTML 语义和嵌套规则，ol 只能直接包含 li，li 不能直接包含 tr，否则解析失败，样式和可访问性全崩。
- 浏览器会自动闭合错误标签，比如把
<ol><tr>...</tr></ol>解析成<ol></ol><tr>...</tr>，序号彻底丢失 -
ol的start和reversed属性只对li生效，对表格行无效 - 真正需要语义化编号（如文档章节），应该用 CSS counter 配合 heading 标签，而不是硬套表格
最容易被忽略的一点：序号是否参与排序、搜索、导出？如果用户要复制整表到 Excel，CSS 生成的序号不会被复制进去，JavaScript 写死的 textContent 才会。这个细节决定你该选哪条路。
