HTML表格利用CSS Counter-reset实现多级嵌套自动编号-html教程-PHP中文网

表格不支持嵌套计数器语义，因tr非作用域容器，直接设counter-reset会导致行号全为1；须用外层wrapper控制计数，再伪元素注入td；嵌套表需独立初始化计数器；复杂场景建议js维护编号。

html表格利用css counter-reset实现多级嵌套自动编号

表格本身不支持嵌套层级语义，counter-reset 无法像在 section 或 ol 中那样自然映射 DOM 嵌套深度——直接套用标题或列表的写法，编号必乱。

为什么 table > tr > td 不能直接套用 counters()？

浏览器对 table 元素的渲染树做了特殊处理：tr 不是 table 的“作用域容器”，它不继承也不创建独立计数器作用域；td 更不会自动成为子级计数器的重置点。你写 tr { counter-reset: row; }，每个 tr 都会重置自己，结果所有行号都是 1。

常见错误现象：tr::before 显示全为 “1”、编号跳变、counters() 输出空字符串或 “0”。

counter-reset 必须设在能承载作用域的块级容器上，而 tr 是表格行盒（table-row），不是标准块容器
counters() 依赖父元素有 counter-increment 且该元素在 DOM 树中构成嵌套路径，但 tr 的父级是 tbody，它本身不参与计数逻辑
即使强行用 display: block 改变 tr 渲染模式，也会破坏表格语义和可访问性（screen reader 无法识别表结构）

如何让表格行拥有类似 “1.1”、“1.2” 的编号？

必须把编号逻辑从表格内部“移出来”：用语义化 wrapper 包裹整张表，再通过 counter-reset + counter-increment 控制编号源，最后用伪元素注入到 td 中。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

关键不是给 tr 加计数器，而是让编号生成脱离表格渲染模型。

在外层 div 或 section 上设 counter-reset: table-section;
给需要编号的 tr 添加 class（如 class="numbered-row"），并在 CSS 中写 .numbered-row { counter-increment: table-section; }
在目标 td（比如第一列）上用 ::before 输出：content: counter(table-section) ". ";
若需二级编号（如每组行内再分小项），需额外加一个计数器，例如：.group-header { counter-reset: subrow; } 写在某行上，然后 .subitem { counter-increment: subrow; }，再用 counters(table-section, ".") "." counter(subrow)

嵌套表格（table inside td）怎么编号？

嵌套表格本质是独立 DOM 子树，但它的 tr 仍不受外层 table 的计数器影响——你得为每个嵌套表单独初始化计数器作用域。

容易踩的坑：以为给外层 table 设了 counter-reset，里面的 tr 就能自动继承编号。

嵌套表的第一行必须显式设 counter-reset: nested-section;（写在 table 元素上，不是 td）
嵌套表内的 tr 要写 counter-increment: nested-section;
不能复用外层计数器名，否则会互相干扰（counter-reset: section; 在两个表上同时存在，第二个表会覆盖第一个）
如果嵌套表要继承外层编号前缀（如 “2.1.1”），只能靠 JS 注入或预设 HTML 属性（如 data-parent="2"），CSS 无法跨表读取父级计数值