创建具有增量列数的html表

Question

I have been success to make increment no on column.

Here my code

 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>

but i want to make table number like image on below

Answer 1

You must reset your counter on the second <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>

Answer 2

On the table element your counter is 1, on the first row it is incremented to 2. Hence starting at 2. You need to do the reset on the first tr .

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

Answer 3

Reset the counter at the second 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

Here is the code to fix your issue. In your code you are counting the row number which is row number 2 in you case. so it is starting from 2.

One of the solution to your problem is use thead and tbody tags and increment the row counter from tbody as done it in below solution.

 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>