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