如何用HTML创建带共享表头的嵌套表格并实现列对齐？

问题背景 #

需要将以下嵌套JSON数据展示在单个HTML表格中，要求表头与所有数据列严格对齐：

[{"ValueID":3,"NumberHits":11,"MoreData":[{"SubTable1":"R0002","SubTable2":10,"SubTable3":22,"SubTable4":100},{"SubTable1":"GoogleTime22212","SubTable2":200,"SubTable3":1234,"SubTable4":10}]},{"ValueID":1,"NumberHits":11,"MoreData":[{"SubTable1":"sev","SubTable2":0,"SubTable3":22,"SubTable4":100}]}]

当前使用嵌套表格的方案存在表头与内部表格列无法对齐的问题，现有简化HTML代码如下：

<table>
<tbody>
    <tr>
        <td class="rh">Item #</td>
        <td class="rh"><span>Value ID</span></td>
        <td class="rh"><span>Number of Hits</span></td>
        <td class="rh"><span></span><span>SubTable1&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><span>SubTable2&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><span>SubTable3&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><span>SubTable4&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span></td>
    </tr>
    <tr>
        <td>
            <div >
                <td class="container">
                    <div id="index-0" >1</div>
                </td>
            </div>
        </td>
        <td><div><span>3</span></div></td>
        <td><div><span>11</span></div></td>
        <td>
            <div >
                <table  cellspacing="0"  style="table-layout: auto; white-space: nowrap;">
                    <tbody>
                        <tr id="0">
                            <td><div><span>R0002</span></div></td>
                            <td><div><span>10</span></div></td>
                            <td><div><span>22</span></div></td>
                            <td><div><span>100</span></div></td>
                        </tr>
                        <tr id="1">
                            <td><div><span>GoogleTime22212</span></div></td>
                            <td><div><span>200</span></div></td>
                            <td><div><span>1,234</span></div></td>
                            <td><div><span>10</span></div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div >
                <td>
                    <div>2</div>
                </td>
            </div>
        </td>
        <td>
            <div><span>1</span></div>
        </td>
        <td>
            <div><span>11</span></div>
        </td>
        <td>
            <div >
                <table  cellspacing="0"  style="table-layout: auto; white-space: nowrap;">
                    <tbody>
                        <tr id="0">
                            <td><div><span>sev</span></div></td>
                            <td><div><span>0</span></div></td>
                            <td><div><span>22</span></div></td>
                            <td><div><span>100</span></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</tbody>
</table>

优雅解决方案：使用单元格合并（rowspan）替代嵌套表格 #

核心思路是放弃嵌套表格，将主表的列扩展为包含所有子数据列，对每个主数据项的Item #、Value ID、Number of Hits单元格使用rowspan属性，使其跨越对应子数据的行数，这样所有列天然对齐，无需额外调整。

最终HTML结构示例 #

<table border="1" cellpadding="4" cellspacing="0" style="table-layout: auto; white-space: nowrap;">
  <thead>
    <tr>
      <th>Item #</th>
      <th>Value ID</th>
      <th>Number of Hits</th>
      <th>SubTable1</th>
      <th>SubTable2</th>
      <th>SubTable3</th>
      <th>SubTable4</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一条主数据，对应2条子数据 -->
    <tr>
      <td rowspan="2">1</td>
      <td rowspan="2">3</td>
      <td rowspan="2">11</td>
      <td>R0002</td>
      <td>10</td>
      <td>22</td>
      <td>100</td>
    </tr>
    <tr>
      <td>GoogleTime22212</td>
      <td>200</td>
      <td>1234</td>
      <td>10</td>
    </tr>
    <!-- 第二条主数据，对应1条子数据 -->
    <tr>
      <td>2</td>
      <td>1</td>
      <td>11</td>
      <td>sev</td>
      <td>0</td>
      <td>22</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

React组件实现思路 #

在React中遍历数据时，对每个主项：

1. 计算其MoreData数组的长度，作为rowspan的值
2. 遍历MoreData生成表格行：
   • 第一行渲染带rowspan的主数据单元格（Item #、Value ID、Number of Hits），同时渲染当前子数据的列
   • 后续行只渲染子数据的列，跳过主数据单元格

示例代码片段：

const data = [{"ValueID":3,"NumberHits":11,"MoreData":[{"SubTable1":"R0002","SubTable2":10,"SubTable3":22,"SubTable4":100},{"SubTable1":"GoogleTime22212","SubTable2":200,"SubTable3":1234,"SubTable4":10}]},{"ValueID":1,"NumberHits":11,"MoreData":[{"SubTable1":"sev","SubTable2":0,"SubTable3":22,"SubTable4":100}]}];

function NestedDataTable() {
  return (
    <table border="1" cellpadding="4" cellspacing="0" style={{ tableLayout: 'auto', whiteSpace: 'nowrap' }}>
      <thead>
        <tr>
          <th>Item #</th>
          <th>Value ID</th>
          <th>Number of Hits</th>
          <th>SubTable1</th>
          <th>SubTable2</th>
          <th>SubTable3</th>
          <th>SubTable4</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => {
          const itemNumber = index + 1;
          const subDataCount = item.MoreData.length;
          
          return item.MoreData.map((subItem, subIndex) => (
            <tr key={`${index}-${subIndex}`}>
              {subIndex === 0 && (
                <>
                  <td rowSpan={subDataCount}>{itemNumber}</td>
                  <td rowSpan={subDataCount}>{item.ValueID}</td>
                  <td rowSpan={subDataCount}>{item.NumberHits}</td>
                </>
              )}
              <td>{subItem.SubTable1}</td>
              <td>{subItem.SubTable2}</td>
              <td>{subItem.SubTable3}</td>
              <td>{subItem.SubTable4}</td>
            </tr>
          ));
        })}
      </tbody>
    </table>
  );
}

优势 #

• 完全解决列对齐问题，所有表头与数据列一一对应
• 符合HTML表格语义化规范，比嵌套表格更易维护和样式控制
• 渲染性能更优，减少DOM层级

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