创建具有增量列数的html表

Question

我成功地在列上增加了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;
}

DEMO

Answer 2

在table元素上，你的计数器是1，在第一行它增加到2.因此从2开始。你需要在第一个tr上重置。

table tr {
    counter-increment: rowNumber;
}
table tr:first {
    counter-reset: rowNumber;
}

Answer 3

在第二个tr。重置计数器。

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>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 4

以下是修复问题的代码。在您的代码中，您正在计算行号，在您的情况下是行号2。所以它从2开始。

您的问题的解决方案之一是使用thead和tbody标记，并从tbody增加行计数器，如下面的解决方案中所做的那样。

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

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