html，一列自动增量编号

Question

   <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>

<td>Num</td>应自动增加页面上的数字。 是否可以在没有任何JavaScript或其他简单解决方案的情况下在HTML中执行此操作？

Answer 1

您可以尝试使用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>

对此的支持似乎相当不错：http://caniuse.com/#feat=css-counters