本文介绍一种符合 HTML 语义规范的纯 CSS 方案，通过 position: sticky 实现表头固定、表体可滚动的效果，彻底规避 无法嵌套在 中导致的 DOM 嵌套警告。
本文介绍一种符合 html 语义规范的纯 css 方案，通过 `position: sticky` 实现表头固定、表体可滚动的效果，彻底规避 `
` 无法嵌套在 `HTML 表格结构有严格的嵌套规则：<table> 的直接子元素只能是 <code><thead>、<code><tbody>、<code><tfoot>、<code><caption></caption> 或 <colgroup></colgroup>；而 <tbody> 不得作为 <code><div>（或任何非表格语义元素）的子节点。你在原代码中将 <code><scrollarea.root></scrollarea.root>（本质是 <div>）置于 <code><table> 内部并包裹 <code><tbody>，违反了这一规范，因此 React（或浏览器 DOM 验证器）抛出 <code>tbody cannot appear as a child of div 和 div cannot appear as a child of table 的警告。
正确解法：放弃在 <table> 内插入非表格元素，改用 CSS 实现滚动隔离。<br>
核心思路是——让整个 <code><table> 位于一个具有固定高度和 <code>overflow-y: scroll 的容器中，并利用 position: sticky 将 <thead> 固定在顶部，从而实现「视觉上仅 tbody 滚动」的效果。该方案完全遵循 HTML 标准，无需额外封装组件，兼容性好（现代浏览器均支持 <code>sticky），且性能更优。✅ 推荐实现（纯 CSS + 语义化 HTML）
<div class="table-container">
<table>
<thead><tr>
<th>Name</th>
<th>Surname</th>
<th>City</th>
</tr></thead>
<tbody>
{data.map((person) => (
<tr key="{person.id}">
<td>{person.name}</td>
<td>{person.surname}</td>
<td>{person.city}</td>
</tr>
))}
</tbody>
</table>
</div>
.table-container {
height: 500px; /* 设定容器高度，控制可见区域 */
overflow-y: auto;
border: 1px solid #e0e0e0;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* 可选：提升列宽稳定性 */
}
thead th {
position: sticky;
top: 0;
background-color: #f9f9f9;
z-index: 10;
padding: 12px 16px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #e0e0e0;
}
tbody td {
padding: 10px 16px;
border-bottom: 1px solid #eee;
}
/* 可选：隔行变色增强可读性 */
tbody tr:nth-child(even) {
background-color: #fafafa;
}
⚠️ 注意事项与最佳实践
z-index 必须设置：<thead> 的 <code>sticky 定位需配合 z-index（大于 tbody 内容），否则可能被滚动内容遮挡；overflow: hidden 父级：.table-container 不应设 overflow: hidden，否则会截断 sticky 效果；table-layout: fixed 提升性能：当列数多或内容长度差异大时，启用该属性可防止重排重绘；key：<tr> 元素需带唯一 <code>key（如 person.id），避免列表渲染异常；<table> 语义，屏幕阅读器能正确识别表头与数据关系，优于用 <code><div> 模拟表格的方案。<h3>✅ 总结</h3>
<p>Radix UI 的 <code><scrollarea></scrollarea> 虽功能强大，但强行注入 <table> 内部会破坏 HTML 结构合法性。而 <code>position: sticky 是 W3C 标准推荐的表头冻结方案，零 JS 依赖、零 DOM 警告、高可访问性，且代码简洁可控。对于绝大多数「固定表头 + 可滚动正文」场景，它都是更专业、更可持续的选择。
