CODEWITHSUNDEEP
html
SAR
SAR

Reputation: 1845

html, one column auto increment numbering

   <table>
        <tr>
          <td>Num</td>
          <td>Name</td>
        </tr>
       <? foreach {{ ?>
        <tr>
           <td>here this must be html auto increment number</td>
           <td>this will be from database</td>
        <tr>
       <? endforeach; ?>
   </table>

The <td>Num</td> should auto-increment the number on the page. Is it possible to do this in HTML without any JavaScript, or another simple solution?

Upvotes: 6

Views: 16751

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

You can try using counter-increment:

table {
    counter-reset: tableCount;     
}
.counterCell:before {              
    content: counter(tableCount); 
    counter-increment: tableCount; 
}
<table>
  <tr>
    <td>Num</td>
    <td>Name</td>
  </tr>
  <tr>
    <td class="counterCell"></td>
    <td>this will be from database</td>
  </tr>
  <tr>
    <td class="counterCell"></td>
    <td>this will be from database</td>
  </tr>
</table>

Support for which seems pretty good: http://caniuse.com/#feat=css-counters

Upvotes: 12

Related Questions