How to display row number in HTML table in specific column?

Question

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.

Here's a picture

I have tried using this CSS:

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

Answer 1

You can use next option which is through css again: Note: class="css-serial"

<table class="css-serial">
  <thead>
    <tr>
      <th>#</th>
      <th>1st Column</th>
      <th>2nd Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </tbody>
</table>

And add next style:

 <style>
/*adding row numbers through css*/
.css-serial {
    counter-reset: serial-number; /* Set the serial number counter to 0 */
}

    .css-serial td:first-child:before {
        counter-increment: serial-number; /* Increment the serial number counter */
        content: counter(serial-number); /* Display the counter */
    }

</style>