Binoy asked this 4 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.


Best Answer by Remy Pereira 4 years ago

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;}

 

Guest 1 year ago
2 likes
<style type="text/css">
table {
  width: 50%;
  counter-reset: row-num;
}
table tr {
  counter-increment: row-num;
}
table tr td:first-child::before {
    content: counter(row-num) ". ";
}
</style>