如何为HTML表格第一列内容按层级深度实现通用缩进？

不用为每个层级单独定义CSS类，直接通过CSS变量+动态内联样式就能实现任意深度的缩进，完全通用，步骤如下：

1. 定义通用CSS样式 #

只需要一段CSS，通过CSS变量控制缩进距离，你可以根据需求调整缩进基数（比如把20px改成15px）：

/* 通用缩进样式 */
.tree-indent {
  padding-left: calc(var(--depth) * 20px);
  /* 可选：如果需要区分层级，可添加辅助样式 */
  /* border-left: 1px solid #eee; */
}

2. 编写HTML表格结构 #

针对每行已知的depth值，在第一列的内容容器上动态设置--depth变量即可：

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>评论</th>
      <th>其他信息</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="tree-indent" style="--depth: 0">comment one</div></td>
      <td>row=1</td>
    </tr>
    <tr>
      <td><div class="tree-indent" style="--depth: 0">comment two</div></td>
      <td>row=2</td>
    </tr>
    <tr>
      <td><div class="tree-indent" style="--depth: 1">comment three</div></td>
      <td>row=3</td>
    </tr>
    <tr>
      <td><div class="tree-indent" style="--depth: 2">comment four</div></td>
      <td>row=4</td>
    </tr>
    <tr>
      <td><div class="tree-indent" style="--depth: 0">comment five</div></td>
      <td>row=5</td>
    </tr>
  </tbody>
</table>

3. 动态渲染场景适配 #

如果是前端框架（Vue/React）或者后端模板渲染，直接把数据里的depth值绑定到样式即可：

Vue示例 #

<table>
  <tr v-for="item in treeData" :key="item.id">
    <td>
      <div class="tree-indent" :style="{ '--depth': item.depth }">
        {{ item.comment }}
      </div>
    </td>
    <td>{{ item.row }}</td>
  </tr>
</table>

React示例 #

<table>
  {treeData.map(item => (
    <tr key={item.id}>
      <td>
        <div className="tree-indent" style={{ '--depth': item.depth }}>
          {item.comment}
        </div>
      </td>
      <td>{item.row}</td>
    </tr>
  ))}
</table>

替代方案：使用data属性 #

如果你偏好data属性而非CSS变量，也可以这样实现：

.tree-indent {
  padding-left: calc(attr(data-depth number) * 20px);
}

对应的HTML：

<div class="tree-indent" data-depth="1">comment three</div>

这个方案的核心是用动态计算代替固定类，不管你的树形数据有多少层，都不需要额外修改CSS，只需要传递对应的depth值即可。

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