为何class为userData的div标签位置异常？如何实现表头固定、表体可滚动的表格效果？

首先，你遇到的div位置异常问题，根源在于HTML规范的限制：<table>元素的直接子元素只能是<caption>、<colgroup>、<thead>、<tbody>、<tfoot>这些合法的表格相关标签。当你在<table>内部直接嵌套<div class="userData">时，Chrome浏览器的自动纠错机制会把这个不合法的元素移到<table>外面，所以你在开发者工具里看到它出现在table上方。

接下来，我给你提供两种实现“表头固定、tbody滚动”的可行方案：

方案一：使用position: sticky实现表头固定（推荐） #

这种方案不需要拆分表格结构，只需要通过CSS让表头粘在顶部，同时给表格容器设置滚动高度。

修正后的HTML结构 #

<div class="details">
  <div class="field-top">
    <p> Details <span style="float:right;"> Record Count:<span id="recordCount">0</span> </span> </p>
  </div>
  <!-- 新增表格容器，用于控制滚动区域 -->
  <div class="table-scroll-container">
    <table class="details-table" id="userTable">
      <thead>
        <tr>
          <th id="firstName">First Name 
            <span class="material-symbols-outlined" id="firstNameUpArrow" onclick="sortFirstName('ascending')" style="display: none"> arrow_upward </span> 
            <span class="material-symbols-outlined" id="firstNameDownArrow" onclick="sortFirstName('descending')" style="display: none"> arrow_downward </span>
          </th>
          <th id="lastName">Last Name 
            <span class="material-symbols-outlined" id="lastNameUpArrow" onclick="sortLastName('ascending')" style="display: none"> arrow_upward </span> 
            <span class="material-symbols-outlined" id="lastNameDownArrow" onclick="sortLastName('descending')" style="display: none"> arrow_downward </span>
          </th>
          <th id="title">Title 
            <span class="material-symbols-outlined" id="titleUpArrow" onclick="sortTitle('ascending')" style="display: none"> arrow_upward </span> 
            <span class="material-symbols-outlined" id="titleDownArrow" onclick="sortTitle('descending')" style="display: none"> arrow_downward </span>
          </th>
        </tr>
      </thead>
      <tbody id="userTableBody">
        <tr><td>John</td><td>Doe</td><td>Engineer</td></tr>
        <tr><td>Jane</td><td>Smith</td><td>Designer</td></tr>
        <!-- 更多数据行 -->
      </tbody>
    </table>
  </div>
</div>

对应的CSS代码 #

/* 外层details容器样式 */
div.details { 
  flex: 3; 
}

/* 表格滚动容器：设置固定高度，开启垂直滚动 */
.table-scroll-container {
  height: 743px;
  overflow-y: auto;
  border: none;
}

/* 表格基础样式：固定列宽避免错位 */
.details-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* 表头固定：使用sticky定位 */
.details-table thead th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 必须设置背景色，防止滚动时内容穿透 */
  padding: 10px;
  text-align: left;
}

/* 表格单元格样式：和表头保持一致的内边距 */
.details-table tbody td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

方案二：拆分表头和内容表格 #

如果sticky定位在某些旧浏览器有兼容性问题，可以把表头和内容分成两个独立的表格，让内容表格在容器内滚动。

修正后的HTML结构 #

<div class="details">
  <div class="field-top">
    <p> Details <span style="float:right;"> Record Count:<span id="recordCount">0</span> </span> </p>
  </div>
  <!-- 表头表格 -->
  <table class="details-table header-table" id="userTableHeader">
    <thead>
      <tr>
        <th id="firstName">First Name 
          <span class="material-symbols-outlined" id="firstNameUpArrow" onclick="sortFirstName('ascending')" style="display: none"> arrow_upward </span> 
          <span class="material-symbols-outlined" id="firstNameDownArrow" onclick="sortFirstName('descending')" style="display: none"> arrow_downward </span>
        </th>
        <th id="lastName">Last Name 
          <span class="material-symbols-outlined" id="lastNameUpArrow" onclick="sortLastName('ascending')" style="display: none"> arrow_upward </span> 
          <span class="material-symbols-outlined" id="lastNameDownArrow" onclick="sortLastName('descending')" style="display: none"> arrow_downward </span>
        </th>
        <th id="title">Title 
          <span class="material-symbols-outlined" id="titleUpArrow" onclick="sortTitle('ascending')" style="display: none"> arrow_upward </span> 
          <span class="material-symbols-outlined" id="titleDownArrow" onclick="sortTitle('descending')" style="display: none"> arrow_downward </span>
        </th>
      </tr>
    </thead>
  </table>
  <!-- 内容滚动容器 -->
  <div class="userData">
    <!-- 内容表格 -->
    <table class="details-table body-table" id="userTableBody">
      <tbody>
        <tr><td>John</td><td>Doe</td><td>Engineer</td></tr>
        <tr><td>Jane</td><td>Smith</td><td>Designer</td></tr>
        <!-- 更多数据行 -->
      </tbody>
    </table>
  </div>
</div>

对应的CSS代码 #

div.details { 
  flex: 3; 
}

/* 表头表格样式 */
.header-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-bottom: 1px solid #eee;
}

.header-table th {
  padding: 10px;
  text-align: left;
  background-color: #ffffff;
}

/* 内容滚动容器 */
div.userData {
  height: 743px;
  overflow-y: auto;
  margin-top: 0;
  border: none;
}

/* 内容表格样式 */
.body-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.body-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

注意事项 #

1. 两种方案都需要设置table-layout: fixed来保证表头和内容的列宽一致，避免滚动时出现错位。
2. 使用sticky定位时，必须给表头设置背景色，否则滚动时下方的内容会穿透表头显示出来。
3. 方案二中要确保两个表格的宽度、列宽完全一致，视觉上才会像一个完整的表格。

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