counter-increment在<tr>上不生效，因其display: table-row受表格渲染约束，计数器常被忽略；应改用tbody tr td:first-child设置counter-increment并配合::before显示。
为什么 counter-increment 在 <tr> 上不生效？
直接给 <tr> 加 counter-increment: row; 通常没反应，不是语法错，而是因为 <tr> 默认是表格布局元素（display: table-row），而 CSS 计数器要求目标元素必须是「可生成盒」且参与正常文档流的元素——<tr> 的盒模型行为受表格渲染规则约束，counter-increment 很可能被忽略。
真正可靠的做法是把计数逻辑转移到 <td> 或伪元素上：
- 给每个
<tr>内第一个<td>设置counter-increment: row; - 用
::before伪元素在该<td>中显示计数器值 - 确保该
<td>没有设置display: none或visibility: hidden
怎么让第一列变成自动行号（含标题行处理）
如果表格有 <thead>，默认会把 <th> 也计入计数，导致正文第一行显示为“2”。要跳过表头，只对 <tbody> <tr> 生效：
tbody tr td:first-child {
counter-increment: row;
}
tbody tr td:first-child::before {
content: counter(row);
}这样 <thead> <tr> 不触发计数，<tbody> 里的每行才从 1 开始。注意：不能写成 tbody tr::before，因为 <tr> 无法直接挂伪元素。
立即学习“前端免费学习笔记（深入）”；
如何重置计数器或支持多表格独立编号
多个表格共用同一个 counter-name 会导致行号累加。想各自从 1 开始，需在每个 <table> 上重置：
- 给每个
<table>加counter-reset: row; - 或者更稳妥地，在
<tbody>上重置：counter-reset: row 0; - 若某表格需要从 101 开始，写成
counter-reset: row 100;
重置位置必须在计数开始前生效，所以放在 <tbody> 或 <table> 上比放在 <tr> 上更可靠。
兼容性和替代方案要注意什么
counter-increment 在所有现代浏览器中都支持，但 IE8–IE11 对表格内伪元素支持不稳定（尤其 ::before 在 <td> 中可能错位或不渲染）。如果必须兼容旧 IE，得用 JS 或后端生成行号。
另外，纯 CSS 方案无法实现“隐藏某行但不跳号”这种逻辑——计数器按 DOM 顺序递增，删掉 <tr> 就少一计数；如需动态控制，得用 JS 操作 counter-increment 或改用 data-* 属性 + JS 更新。
真正在意语义和可访问性的场景，行号列其实不该进 <th> 或 <td> 的内容流，而是作为视觉辅助存在——这时候用伪元素 + aria-hidden="true" 更合适。
