javascript - 使用 CSS 的自动索引行未按预期运行

Question

我正在尝试使用 CSS 自动索引每行中的第一个单元格。但是，第一行中的数字以 2 开头。我需要在 CSS 中进行哪些更改才能使计数器从 1 开始？

table {
  counter-reset: rowNumber;
}

table tr {
  counter-increment: rowNumber;
}

table tbody tr td:first-child::before {
  content: counter(rowNumber);
}

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>User Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>{{userFullName}}</td>
    </tr>
    <tr>
      <td></td>
      <td>{{userFullName}}</td>
    </tr>
  </tbody>
</table>

Answer 1

在 tbody 而不是 table 上设置初始计数器。

tbody {
  counter-reset: rowNumber;
}

tbody {
  counter-reset: rowNumber;
}

tbody tr {
  counter-increment: rowNumber;
}

tbody tr td:first-child::before {
  content: counter(rowNumber);
}

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>User Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>{{userFullName}}</td>
    </tr>
    <tr>
      <td></td>
      <td>{{userFullName}}</td>
    </tr>
  </tbody>
</table>