如何仅通过CSS为HTML <table>添加自动索引列？

一、纯CSS实现方案 #

完全可以用CSS实现自动索引列，无需JavaScript，核心是利用CSS计数器功能：

实现代码 #

HTML结构

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>ITEM</th>
      <th>PRICE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Banana</td>
      <td>$2</td>
    </tr>
    <tr>
      <td></td>
      <td>Orange</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>

CSS样式

table {
  counter-reset: row-counter; /* 初始化行计数器 */
  border-collapse: collapse;
  width: 300px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tbody tr {
  counter-increment: row-counter; /* 每遍历一行，计数器加1 */
}

tbody tr td:first-child::before {
  content: counter(row-counter); /* 将计数器值显示在第一个单元格内 */
}

效果说明 #

不需要手动编写<td>1</td>这类硬编码的索引值，CSS会自动为表格体的每一行生成连续的编号，表头的No.列也能正常对应。

二、JavaScript实现的兼容性说明 #

如果选择用JavaScript实现动态添加索引列，当浏览器禁用JavaScript时：

• 动态生成的索引列会缺失，但原表格的核心内容（ITEM、PRICE列）不会受到影响，页面不会出现布局混乱或内容丢失的异常情况，只是少了自动编号而已。

简单JS实现示例 #

HTML结构（无需提前留空索引单元格）

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>ITEM</th>
      <th>PRICE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Banana</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>

JavaScript代码

const tableBody = document.querySelector('table tbody');
const rows = tableBody.querySelectorAll('tr');

rows.forEach((row, index) => {
  const indexCell = document.createElement('td');
  indexCell.textContent = index + 1;
  row.insertBefore(indexCell, row.firstChild);
});

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