title: How to display row number in HTML table in specific column?
body: <p>I have a table in HTML that has 5 columns.  The first column is the "row number", where I want to show which row it is--starting from 1.</p>
  
  <p><a href="https://i.stack.imgur.com/KMDj6.png" rel="nofollow noreferrer">Here's a picture</a></p>
  
  <p>I have tried using this CSS:</p>
  
  <pre><code>body {
      /* Set the Serial counter to 0 */
      counter-reset: Serial; 
  }
  
  table {
      border-collapse: separate;
  }
  
  tr td:first-child:before {
      /* Increment the Serial counter */
      counter-increment: Serial;
  
      /* Display the counter */
      content: "Serial is: " counter(Serial); 
  }
  </code></pre>