Binoy asked this 2 years ago

give automatic numbering to table row using css

I have a html table like below


No

Item Name

Quantity

Price

1

Abcd

12

10

2

decf

5

15

3

xyz

20

10

Is it possible to have automatic numbering for the first column (No) of each table row using CSS?

I tried the following CSS

table {counter-reset: no;}
table tr{counter-increment: no;}
table tr td:first-child:before{ content: counter(no);}

 

and then the numbering starts from 2. I want to exclude the first row which is the header row.


Remy Pereira 2 years ago
1 like

By default the counter starts from 0. You can start the counter from any value.

To skip the header row, start the counter from -1 as below:

table {counter-reset: no -1;}