jQuery子行布局问题：如何让表头(th)位于数据单元格(td)上方

你的问题出在子行的HTML结构设计上：当前你把子表的表头<th>和数据<td>放在了同一个<tr>里，而且没有处理父表的列跨度，导致表头和数据挤在同一行，无法对齐。要实现表头单独占一行，你需要在子行里嵌套一个完整的子表格，让子表自己管理表头和数据行的结构。

修改后的完整代码 #

HTML（无需改动）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="parentTable">
  <thead>
    <tr class="category">
      <th>Unique ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Price</th>
      <th>Hours</th>
    </tr>
  </thead>
  <tbody id="parentTableBody">
  </tbody>
</table>

jQuery（核心修改子行生成逻辑）

$(document).ready(function() {
  var arr1 = generateItem();
  if (arr1) {
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function(i, e) {
      // 生成父行
      tr = $('<tr>');
      tr.append("<td>" + "<a href='#'>" + (e.UniqueId || "") + "</a>" + "</td>");
      tr.append("<td>" + (e.Name || "") + "</td>");
      tr.append("<td>" + (e.Email || "") + "</td>");
      tr.append("<td>" + (e.Price || "") + "</td>");
      tr.append("<td>" + (e.Hours || "") + "</td>");
      $('#parentTableBody').append(tr);

      // 生成子行（嵌套子表格）
      tr = $('<tr class="child-row">');
      // 子行的td跨父表所有5列
      var childTable = `
        <td colspan="5">
          <table class="child-table">
            <thead>
              <tr>
                <th>Description</th>
                <th>Arrival</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>${e.Description || ""}</td>
                <td>${e.Arrival || ""}</td>
              </tr>
            </tbody>
          </table>
        </td>
      `;
      tr.append(childTable);
      $('#parentTableBody').append(tr);
      tr.hide();
    });
  }
});

function generateItem() {
  var item = [{
    UniqueId: "0",
    Name: "Alex",
    Email: "alex@email.com",
    Price: "$20.00",
    Hours: "1",
    Description: "N/A",
    Arrival: "Noon"
  }, {
    UniqueId: "1",
    Name: "Jay",
    Email: "jay@email.com",
    Price: "$12.00",
    Hours: "0.2",
    Description: "Small",
    Arrival: "test"
  }, {
    UniqueId: "2",
    Name: "Dylan",
    Email: "dylan@email.com",
    Price: "$32.00",
    Hours: "2.2",
    Description: "Heavy"
  }];
  return item;
}

$(function() {
  $('#parentTable tbody a').on("click", function(event) {
    $baseRow = $(event.target).closest("tr");
    next = $baseRow.next("tr");
    if (next.is(".child-row")){
      next.toggle();
    }
  });
});

关键改动说明 #

1. 子行结构重构：不再在子行的<tr>里混合<th>和<td>，而是创建一个跨父表所有5列的<td>（用colspan="5"），在这个<td>内部嵌套一个完整的子表格<table>。
2. 子表独立结构：子表格包含自己的<thead>（放表头行）和<tbody>（放数据行），这样表头自然单独占一行，数据行在下方，完美对齐。
3. 代码可读性优化：用模板字符串拼接子表格HTML，比多次append更清晰。

可选样式优化（让子表更美观） #

如果需要让子表和父表样式统一，可以加一点CSS：

.child-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.child-table th, .child-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.child-table th {
  background-color: #f2f2f2;
}

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