Создать таблицу 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

На элементе table ваш счетчик равен 1, в первой строке он увеличивается до 2. Следовательно, начиная с 2. Вам нужно сделать сброс на первом tr.

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

Answer 2

Сбросить счетчик на втором 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 3

Вот код, чтобы решить проблему. В вашем коде вы подсчитываете номер строки, который является номером строки 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>

Answer 4

Вы должны сбросить счетчик на второй <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