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

<table border=1>
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments