如何在HTML表格中借助counter-reset实现嵌套表格的多级编号
表格无法直接用counter-reset实现多级编号，因为table和tr无嵌套作用域，counter-reset不穿透；需改用div/ol/dl等支持嵌套的语义结构，或仅对tbody内tr做单级线性编号。
表格本身不支持嵌套编号——<table>没有层级语义，<tr>之间不存在“父-子”计数关系，直接套用 counter-reset 会失效或产生意外累加。真要编号，得把表格结构“伪装”成有嵌套语义的容器，或改用其他更合适的 HTML 结构。
为什么 table > tr > td 无法直接用 counter-reset 做多级编号
浏览器对 <table> 的渲染逻辑决定了：counter-reset 必须作用在具有明确嵌套作用域的块级容器上（如 <div>、<ol>、<section>），而 <tr> 是表格行盒，不具备 CSS 计数器的作用域继承能力；<td> 更是匿名盒，无法承载 counter-increment。即使强行写：
table { counter-reset: row; }tr { counter-increment: row; }td::before { content: counter(row); }
结果只会是每行都显示 1，或全部为 0——因为 tr 不被当作独立计数作用域，且 counter-reset 在 table 上不会向下穿透到 tr 的子树中形成嵌套链。
想在表格里实现类似 1.1、1.2.1 这种编号，必须重构 DOM
可行做法是放弃原生 <table>，改用语义清晰、支持嵌套的结构，再用 CSS counters 控制编号：
立即学习“前端免费学习笔记（深入）”；
- 用
<dl>+<dt>/<dd>模拟表头/数据行，<dd>内可嵌套<dl> - 用
<ol>套<li>，每个<li>内放<table>或纯内容，编号由<li>承担 - 最稳妥的是用
<div class="table">+<div class="row">+<div class="cell">，并确保嵌套层级真实存在（比如某row下有subrow）
只要 DOM 有父子嵌套，CSS 就能通过 counter-reset 和 counters() 正常工作。例如：
.table { counter-reset: section; }.row { counter-increment: section; }.row::before { content: counters(section, ".") " "; }.subrow { counter-increment: section; }.subrow::before { content: counters(section, ".") " "; }
如果非要用原生 table，只能退化为单级编号
仅对第一列的 <td> 或 <th> 做线性编号（如 1、2、3…），不涉及嵌套：
- 在
<tbody>上设counter-reset: row - 给每个
<tr>加counter-increment: row - 在首个
<td>或<th>上用::before { content: counter(row) ". "; } - 禁用原生
list-style（表格不用这个，但要确认没其他样式干扰）
注意：这种编号与表格结构无关，只按 <tr> 的 DOM 顺序递增，跳过 <thead> 或 <tfoot> 需额外选择器排除。
容易被忽略的关键点
很多人试图在 <td> 上写 counter-reset，指望它重置下一行的编号——这是无效的。counter-reset 只影响**后续兄弟元素和后代元素**，而 <td> 后续没有同级 <tr>，它的后代也几乎不可能触发 counter-increment。真正起作用的永远是容器元素（<tbody>、<div>、<ol>），不是单元格。
