Binoy asked this 8 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 8 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 5 years ago

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

Guest 1 year ago

2 likes

 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) ". ";
}