如何实现表格行长度差异化？解决子行展开后布局偏移问题

安全阿岳

2026-8-16

解决树形表格子行展开错位问题

核心思路

表格列宽被挤压错位的本质是**表格默认的自动列宽计算（table-layout: auto）**会根据每行内容动态调整列宽，子行展开后内容长度变化会影响整个列的宽度。只需通过CSS固定列宽，让每一列的宽度独立于行内容即可解决。

具体实现步骤

1. 给表格设置固定布局模式

在CSS中给表格添加table-layout: fixed，强制浏览器按<th>定义的宽度分配列宽，不再根据内容动态调整：

.tree-table {
  width: 100%; /* 确保表格占满容器 */
  table-layout: fixed; /* 固定列宽布局 */
  border-collapse: collapse; /* 合并边框，避免间隙 */
}

2. 给每一列设置固定宽度

针对表格的<th>和对应的<td>设置明确宽度，比如第一列放分类名称，第二列放操作按钮：

.tree-table th:nth-child(1),
.tree-table td:nth-child(1) {
  width: 70%; /* 分配70%宽度给分类列 */
}
.tree-table th:nth-child(2),
.tree-table td:nth-child(2) {
  width: 30%; /* 分配30%宽度给操作列 */
}

如果需要更精确的像素值，也可以用width: 400px这类固定值，根据实际需求调整。

3. 子行缩进处理（可选，优化树形层级视觉）

为了区分主元素和子元素的层级，给子行的第一个<td>添加缩进，避免和主行对齐混乱：

/* 二级子行缩进 */
.tree-table .child-row td:nth-child(1) {
  padding-left: 20px;
}
/* 三级子行缩进 */
.tree-table .grandchild-row td:nth-child(1) {
  padding-left: 40px;
}

4. 配合Razor代码调整

确保你的Razor视图中，子行（二级、三级）的<td>数量和主行一致，不要遗漏列，同时给子行添加对应的class（比如child-row、grandchild-row）方便CSS选择：

<!-- 主行示例 -->
<tr class="parent-row">
  <td>Hauptkategorie_1</td>
  <td>DELETE</td>
</tr>
<!-- 二级子行示例 -->
<tr class="child-row">
  <td>SubKategorie_1</td>
  <td>DELETE</td>
</tr>