HTML表格父子关系布局：列对齐问题及解决方案

一、让底层表头均匀分布的CSS方案 #

核心思路是通过固定表格布局强制列宽均分，同时处理长表头的换行显示：

1. 设置表格为固定布局，确保列宽不受内容长度影响：

table {
  width: 100%;
  table-layout: fixed; /* 关键：固定布局，列宽由CSS或表头定义 */
  border-collapse: collapse;
}

2. 给底层表头（Type、Amount、Color、Other、Other2）设置均等宽度，允许长内容自动换行：

thead tr:last-child th {
  width: 20%; /* 5列均分，每列占20%宽度 */
  word-wrap: break-word; /* 长内容自动换行 */
  white-space: normal; /* 取消默认的不换行规则 */
  border: 1px solid #ddd;
  padding: 8px;
}

3. 合并的父表头（Taste）设置居中样式：

thead tr:first-child th {
  text-align: center;
  border: 1px solid #ddd;
  padding: 8px;
}

对应的HTML结构示例：

<table>
  <thead>
    <tr>
      <th colspan="5">Taste</th>
    </tr>
    <tr>
      <th>Type</th>
      <th>Amount</th>
      <th>Color</th>
      <th>Other</th>
      <th>Other2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 父子记录示例 -->
    <tr>
      <td colspan="5">父记录：甜品类</td>
    </tr>
    <tr>
      <td>蛋糕</td>
      <td>2块</td>
      <td>奶油白</td>
      <td>巧克力夹心</td>
      <td>常温保存</td>
    </tr>
    <tr>
      <td>冰淇淋</td>
      <td>1杯</td>
      <td>草莓粉</td>
      <td>脆皮筒</td>
      <td>冷藏</td>
    </tr>
  </tbody>
</table>

二、更合适的父子记录展示方式 #

如果表格布局的局限性明显，可尝试以下更灵活的方案：

1. 折叠/展开式表格 #

通过JavaScript实现点击父行展开子记录，子行可跨列展示，彻底避免列宽挤压问题：

<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; }
.parent-row { cursor: pointer; background-color: #f5f5f5; }
.child-row { display: none; }
.child-row td { padding-left: 20px; }
</style>

<table>
  <thead>
    <tr>
      <th>分类</th>
      <th>Amount</th>
      <th>Color</th>
      <th>Other</th>
      <th>Other2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-row">
      <td colspan="5">甜品类</td>
    </tr>
    <tr class="child-row">
      <td>蛋糕</td>
      <td>2块</td>
      <td>奶油白</td>
      <td>巧克力夹心</td>
      <td>常温保存</td>
    </tr>
    <tr class="child-row">
      <td>冰淇淋</td>
      <td>1杯</td>
      <td>草莓粉</td>
      <td>脆皮筒</td>
      <td>冷藏</td>
    </tr>
  </tbody>
</table>

<script>
document.querySelectorAll('.parent-row').forEach(row => {
  row.addEventListener('click', () => {
    let nextRow = row.nextElementSibling;
    while (nextRow && nextRow.classList.contains('child-row')) {
      nextRow.style.display = nextRow.style.display === 'table-row' ? 'none' : 'table-row';
      nextRow = nextRow.nextElementSibling;
    }
  });
});
</script>

2. 嵌套表格 #

在父记录的单元格内嵌入子表格，适合层级关系明确、需要独立子表头的场景：

<style>
.parent-table { width: 100%; border-collapse: collapse; }
.parent-table th, .parent-table td { border: 1px solid #ddd; padding: 8px; }
.child-table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.child-table td { border: 1px solid #eee; padding: 6px; }
</style>

<table class="parent-table">
  <thead>
    <tr>
      <th>分类</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>甜品类</td>
      <td>
        <table class="child-table">
          <thead>
            <tr>
              <th>Type</th>
              <th>Amount</th>
              <th>Color</th>
              <th>Other</th>
              <th>Other2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>蛋糕</td>
              <td>2块</td>
              <td>奶油白</td>
              <td>巧克力夹心</td>
              <td>常温保存</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

3. 响应式卡片分组 #

放弃表格布局，用Div构建卡片组，更适配移动端，层级关系视觉上更清晰：

<style>
.card-group { max-width: 800px; margin: 0 auto; }
.parent-card { background: #f5f5f5; padding: 12px; margin-bottom: 8px; border-radius: 4px; cursor: pointer; }
.child-card { background: #fff; padding: 10px; margin: 8px 0 8px 20px; border-left: 3px solid #ddd; border-radius: 4px; display: none; }
.child-card .item { display: inline-block; margin-right: 16px; }
</style>

<div class="card-group">
  <div class="parent-card">
    甜品类
  </div>
  <div class="child-card">
    <div class="item"><strong>Type:</strong> 蛋糕</div>
    <div class="item"><strong>Amount:</strong> 2块</div>
    <div class="item"><strong>Color:</strong> 奶油白</div>
    <div class="item"><strong>Other:</strong> 巧克力夹心</div>
    <div class="item"><strong>Other2:</strong> 常温保存</div>
  </div>
</div>

<script>
document.querySelectorAll('.parent-card').forEach(card => {
  card.addEventListener('click', () => {
    const childCard = card.nextElementSibling;
    childCard.style.display = childCard.style.display === 'block' ? 'none' : 'block';
  });
});
</script>

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