CSS的content属性不能直接用于HTML表格单元格自动编号，必须借助counter-reset和counter-increment配合::before伪元素实现；多级编号或动态交互场景应优先使用JavaScript。
content属性不能直接用于HTML表格单元格的自动编号
这是个常见误解：content 是 CSS 伪元素（::before/::after）的属性，它本身不作用于 HTML 元素的“内容插入”，更不会自动感知表格行序。直接在 <td> 上写 content: "1. "; 完全无效——CSS 中没有这种用法，浏览器会忽略。
用 counter-reset + counter-increment 实现真正的自动编号
真正可行的方式是借助 CSS 计数器机制，配合 counter-reset 在表格上初始化计数器，再用 counter-increment 在每行触发递增，最后通过 ::before 和 counter() 函数输出编号。
-
<table>上设置counter-reset: row-num; -
<tr>上设置counter-increment: row-num; -
<td>或<th>的::before里写content: counter(row-num) ". "; - 注意：如果只想给第一列编号，建议只对首列
<td>:first-child::before生效，避免每格都出编号
示例片段：
table { counter-reset: row-num; }
tr { counter-increment: row-num; }
td:first-child::before { content: counter(row-num) ". "; }
为什么不用 display: table-cell 自定义元素模拟？
有人试图用 <div class="row"><div class="cell"> 搭配 counter，但这样失去语义和可访问性，且 counter-reset 在非 <table> 容器中行为不稳定（尤其嵌套时重置逻辑易错）。原生 <table> 的 DOM 层级清晰，counter 能可靠继承和重置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 若表格有
<thead>，需单独控制：给thead tr设置counter-increment: none;，否则表头行也会被计数 - 带分页或动态加载的表格，CSS 计数器无法跨渲染周期保持状态，此时必须切回 JS 生成编号
- IE 不支持
counter()在::before中的字符串拼接（如counter(n) "."），老项目需 fallback
需要多级编号（如 1.1、2.3）怎么办？
CSS 计数器支持嵌套，但表格场景下要谨慎：每层 counter-reset 需绑定到对应层级容器（如 <tbody> 可设 counter-reset: section;），而 <tr> 内部无法自然形成“子计数器”上下文。
- 简单多级（如章节+小节）：用两个独立计数器，
counter(section) "." counter(sub)，靠 JS 或服务端控制counter-increment触发时机 - 纯 CSS 实现仅适用于静态、结构固定的嵌套表（例如
<table>套<table>），且外层<table>必须设counter-reset，内层<table>再设自己的counter-reset - 绝大多数实际业务中，多级编号意味着数据有层级语义，这时用 JS 动态生成
data-number属性并 CSS 映射更可控
真正麻烦的不是怎么写 CSS，而是当表格支持排序、筛选、折叠时，编号是否该重排——这时候 CSS 计数器就彻底失效了，得回到 DOM 操作层面。
