CSS Property Value How to - Index table rows with counter(rowNumber)








Question

We would like to know how to index table rows with counter(rowNumber).

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--from   w  w  w. jav a  2  s .c  o  m-->
  counter-reset: rowNumber;
}

table tr {
  counter-increment: rowNumber;
}

table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}
</style>
</head>
<body>
  <table border="1">
    <tr>
      <td>blue</td>
    </tr>
    <tr>
      <td>red</td>
    </tr>
    <tr>
      <td>black</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: