表格无法直接用counter-reset实现多级编号，因为table和tr无嵌套作用域，counter-reset不穿透；需改用div/ol/dl等支持嵌套的语义结构，或仅对tbody内tr做单级线性编号。
表格本身不支持嵌套编号——<table>没有层级语义，<code><tr>之间不存在“父-子”计数关系，直接套用 <code>counter-reset 会失效或产生意外累加。真要编号，得把表格结构“伪装”成有嵌套语义的容器，或改用其他更合适的 HTML 结构。
为什么 table > tr > td 无法直接用 counter-reset 做多级编号
浏览器对 <table> 的渲染逻辑决定了：<code>counter-reset 必须作用在具有明确嵌套作用域的块级容器上（如 <div>、<code><ol></ol>、<section></section>），而 <tr> 是表格行盒，不具备 CSS 计数器的作用域继承能力；<code><td> 更是匿名盒，无法承载 <code>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 控制编号：
<ul>
<li>用 <code><dl></dl> + <dt></dt>/<dd></dd> 模拟表头/数据行，<dd></dd> 内可嵌套 <dl></dl>
<ol></ol> 套 <li>，每个 <li> 内放 <table> 或纯内容，编号由 <code><li> 承担
<div class="table"> + <code><div class="row"> + <code><div class="cell">，并确保嵌套层级真实存在（比如某 <code>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> 或 <code><th> 做线性编号（如 1、2、3…），不涉及嵌套：
<ul><li>在 <code><tbody> 上设 <code>counter-reset: row
<tr> 加 <code>counter-increment: row
<td> 或 <code><th> 上用 <code>::before { content: counter(row) ". "; }
list-style（表格不用这个，但要确认没其他样式干扰）注意：这种编号与表格结构无关，只按 <tr> 的 DOM 顺序递增，跳过 <code><thead> 或 <code><tfoot> 需额外选择器排除。
<h3>容易被忽略的关键点</h3>
<p>很多人试图在 <code><td> 上写 <code>counter-reset，指望它重置下一行的编号——这是无效的。counter-reset 只影响**后续兄弟元素和后代元素**，而 <td> 后续没有同级 <code><tr>，它的后代也几乎不可能触发 <code>counter-increment。真正起作用的永远是容器元素（<tbody>、<code><div>、<code><ol></ol>），不是单元格。
