嵌套分类HTML表格布局问题求助：布局错乱与优化方案咨询

针对你遇到的嵌套分类表格布局错乱、rowspan计算复杂的问题，结合按列渲染的需求，提供两种可行方案：

方案1：用CSS Grid模拟表格（推荐） #

原生表格的合并单元格逻辑在嵌套分类场景下极易出错，CSS Grid能更灵活实现按列组织的嵌套布局，完全避开rowspan计算：

• 核心逻辑：每个分类组作为独立的Grid列，父分类占满整列高度，子分类在父分类下方依次排列，Grid会自动处理各列的对齐问题。
• 代码示例：

<div class="category-grid">
  <!-- 第一列分类组 -->
  <div class="category-column">
    <div class="parent-category">父分类A</div>
    <div class="child-category">子分类A1</div>
    <div class="child-category">子分类A2</div>
  </div>
  <!-- 第二列分类组 -->
  <div class="category-column">
    <div class="parent-category">父分类B</div>
    <div class="child-category">子分类B1</div>
    <div class="child-category">子分类B2</div>
    <div class="child-category">子分类B3</div>
  </div>
</div>

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  border: 1px solid #ccc;
}
.category-column {
  display: grid;
  border-right: 1px solid #ccc;
}
.category-column:last-child {
  border-right: none;
}
.parent-category {
  padding: 8px;
  background: #f5f5f5;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
.child-category {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

• 优势：按列组织数据，每个分类组独立维护；父分类高度自动适配子项数量，不会出现布局错乱；支持响应式，适配不同屏幕宽度；数据加载时可单独加载某一列，效率更高。

方案2：改进原生表格结构 #

如果必须使用原生表格，可通过**按分类组分<tbody>**的方式简化rowspan计算：

• 核心逻辑：每个分类组对应一个<tbody>，父分类单元格的rowspan值为当前组的子项数量+1（包含父分类自身），因为每个<tbody>内的行数固定，计算逻辑极其简单。
• 代码示例：

<table class="category-table">
  <!-- 第一列分类组 -->
  <tbody>
    <tr>
      <td class="parent-category" rowspan="3">父分类A</td>
      <td>子分类A1</td>
    </tr>
    <tr>
      <td>子分类A2</td>
    </tr>
  </tbody>
  <!-- 第二列分类组 -->
  <tbody>
    <tr>
      <td class="parent-category" rowspan="4">父分类B</td>
      <td>子分类B1</td>
    </tr>
    <tr>
      <td>子分类B2</td>
    </tr>
    <tr>
      <td>子分类B3</td>
    </tr>
  </tbody>
</table>

.category-table {
  border-collapse: collapse;
  width: 100%;
}
.parent-category {
  background: #f5f5f5;
  font-weight: bold;
  border: 1px solid #ccc;
  padding: 8px;
}
.category-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

• 优势：保留原生表格的语义化特性；按列（<tbody>）组织数据，维护成本低；rowspan仅需计算当前分类组的行数量，不会出现跨组的布局问题。

避坑提示 #

• 别在单个<tr>里混合多个父/子分类，这种结构最容易因单元格高度变化导致布局错位；
• 按列渲染时，优先选CSS Grid方案，原生表格仅在必须使用表格语义的场景下采用；
• 动态加载数据时，按列分组的结构可以实现局部加载，无需等待整行数据，提升用户体验。

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