javascript - 使用递增的列数创建 html 表

Question

我已经成功地在列上设置了 increment no。

这是我的代码

table {
    counter-reset: rowNumber;
}
table tr {
    counter-increment: rowNumber;
}
table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

<table border="1">
    <tr>
        <th>No</th> <th>Name</th>    
    </tr>
    <tr>
        <td></td> <td>jhon</td>
    </tr>
    <tr>
        <td></td> <td>lucy</td>
    </tr>
    <tr>
        <td></td> <td>joe</td>
    </tr>
</table>

但我想制作如下图所示的表号

Answer 1

您必须在第二个<tr> 重置您的计数器

table tr:nth-child(2){
  counter-reset: rowNumber;
}
table tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

<table border="1">
    <tr>
        <th>#</th> <th>Name</th>    
    </tr>
    <tr>
        <td></td> <td>jhon</td>
    </tr>
    <tr>
        <td></td> <td>lucy</td>
    </tr>
    <tr>
        <td></td> <td>joe</td>
    </tr>
</table>