CSS automatic table row numbering

CSS3 counters can be used to number table rows automatically. We need to maintain a counter per row and display it using ::before on first td of every row. Here is code snippet for this.

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

<table border=1>
  <tr><td></td><td>one</td></tr>
  <tr><td></td><td>two</td></tr>
  <tr><td></td><td>three</td></tr>
</table>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments