如何将带横向表头的HTML表格转换为每行含两列子表格的结构？

嘿，我来帮你搞定这个表格转换的事儿！要把带横向表头的HTML表格改成每行包含两列子表格（左列是纵向表头、右列对应数据值）的形式，核心就是把原来的横向表头和对应数据拆成独立的「表头-数据」对，下面我给你分手动和自动两种方式详细说明：

一、手动转换（适合少量数据） #

步骤思路 #

1. 先提取原始表格里的所有表头文本（就是<th>标签里的内容）和对应数据行的<td>内容；
2. 新建一个外层表格，每一行对应一组「表头-数据」组合（或者整组数据条目，看你需求）；
3. 在外层表格的每行里嵌入一个两列的子表格，左列放表头文本（作为纵向表头），右列放对应的数据值。

示例对比 #

原始横向表头表格

<!-- 原始表格：横向表头 -->
<table class="original-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

转换后的纵向表头表格（按数据条目分组）

如果希望每个数据条目作为一个独立区块，转换后的结构是这样的：

<!-- 转换后：每个数据条目对应一个子表格，包含所有表头-数据对 -->
<table class="converted-table">
  <tbody>
    <!-- 张三的信息区块 -->
    <tr>
      <td>
        <table class="sub-table">
          <tr>
            <th>姓名</th>
            <td>张三</td>
          </tr>
          <tr>
            <th>年龄</th>
            <td>28</td>
          </tr>
          <tr>
            <th>职业</th>
            <td>程序员</td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- 李四的信息区块 -->
    <tr>
      <td>
        <table class="sub-table">
          <tr>
            <th>姓名</th>
            <td>李四</td>
          </tr>
          <tr>
            <th>年龄</th>
            <td>32</td>
          </tr>
          <tr>
            <th>职业</th>
            <td>设计师</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

如果想要每个「表头-数据」对单独占一行，也可以把每个组合拆成独立的子表格行，这个根据你的实际展示需求调整就行。

二、自动转换（适合大量数据） #

如果表格数据量很大，手动改太麻烦，可以用JavaScript写个转换函数，自动生成目标表格：

转换函数代码 #

function convertHorizontalToVerticalTable(originalTableSelector) {
  // 获取原始表格元素
  const originalTable = document.querySelector(originalTableSelector);
  if (!originalTable) {
    console.error('找不到目标表格');
    return;
  }

  // 提取所有表头文本
  const headers = Array.from(originalTable.querySelectorAll('thead th'))
    .map(th => th.textContent.trim());
  // 提取所有数据行
  const dataRows = Array.from(originalTable.querySelectorAll('tbody tr'));

  // 创建转换后的外层表格
  const convertedTable = document.createElement('table');
  convertedTable.classList.add('converted-table');
  const tbody = document.createElement('tbody');

  // 遍历每一行数据，生成对应的子表格
  dataRows.forEach(row => {
    const dataCells = Array.from(row.querySelectorAll('td'))
      .map(td => td.textContent.trim());
    
    // 创建当前数据条目的子表格
    const subTable = document.createElement('table');
    subTable.classList.add('sub-table');
    const subTbody = document.createElement('tbody');

    // 给每个表头匹配对应的数据
    headers.forEach((header, index) => {
      const subRow = document.createElement('tr');
      const th = document.createElement('th');
      th.textContent = header;
      const td = document.createElement('td');
      td.textContent = dataCells[index] || '';
      
      subRow.appendChild(th);
      subRow.appendChild(td);
      subTbody.appendChild(subRow);
    });

    subTable.appendChild(subTbody);

    // 把子表格放到外层表格的一行中
    const mainRow = document.createElement('tr');
    const mainTd = document.createElement('td');
    mainTd.appendChild(subTable);
    mainRow.appendChild(mainTd);
    tbody.appendChild(mainRow);
  });

  convertedTable.appendChild(tbody);
  // 把转换后的表格插入到原始表格的后面
  originalTable.parentNode.insertBefore(convertedTable, originalTable.nextSibling);
}

// 调用方法：传入原始表格的CSS选择器
convertHorizontalToVerticalTable('.original-table');

可选美化样式 #

可以加一点CSS让表格看起来更规整：

/* 子表格样式 */
.sub-table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sub-table th, .sub-table td {
  border: 1px solid #e0e0e0;
  padding: 10px;
  text-align: left;
}
.sub-table th {
  background-color: #f8f9fa;
  width: 30%;
  font-weight: 600;
}
/* 外层表格样式 */
.converted-table {
  width: 100%;
  border: none;
}

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