如何通过CSS为HTML表格任意列添加自动索引？

核心是利用CSS计数器功能，无需手动输入序列，具体实现如下：

实现代码 #

将以下CSS代码添加到页面的<style>标签中（或外部样式表）：

table {
  counter-reset: row-index -1; /* 初始化计数器为-1，确保首次递增后得到0 */
}

table tr td:nth-child(2)::before {
  counter-increment: row-index; /* 每遍历一个中间单元格，计数器加1 */
  content: counter(row-index); /* 输出当前计数器值，生成0、1、2序列 */
}

完整HTML示例 #

原表格的中间列手动数值可删除，最终代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    table {
      counter-reset: row-index -1;
    }
    table tr td:nth-child(2)::before {
      counter-increment: row-index;
      content: counter(row-index);
    }
  </style>
</head>
<body>
  <table border="1">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
  </table>
</body>
</html>

关键说明 #

• td:nth-child(2)精准定位表格的第二列（中间列）；
• 通过计数器的初始化和递增逻辑，自动生成从0开始的连续序列；
• 无多余样式添加，完全匹配需求。

内容的提问来源于stack exchange，提问作者Dan Jacobson