如何消除table嵌套Radix UI ScrollArea引发的DOM嵌套警告？

问题核心是违反了HTML语义规范：<table>的直接子元素只能是thead、tbody、tfoot这类表格专用标签，不能放div；而tbody必须是table的子元素，不能被div包裹。你之前把Radix的ScrollArea（会渲染div）直接塞到table里，又把tbody放在ScrollArea的div里，自然触发警告。

给你两种靠谱的解决思路：

思路1：拆分表格+Radix ScrollArea（保留Radix功能） #

把表头和表体拆成两个独立的table，用Radix包裹表体的table，再通过CSS让两部分列宽对齐：

代码结构 #

<div className="table-wrapper">
  {/* 固定表头的表格 */}
  <table className="table-header">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
  </table>

  {/* 可滚动的表体区域 */}
  <ScrollArea.Root className="scroll-area">
    <ScrollArea.Viewport>
      <table className="table-body">
        {/* 循环生成多个tbody */}
        {dataGroups.map(group => (
          <tbody key={group.id}>
            <tr>
              <td>{group.col1}</td>
              <td>{group.col2}</td>
              <td>{group.col3}</td>
            </tr>
          </tbody>
        ))}
      </table>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" />
    <ScrollArea.Scrollbar orientation="horizontal" />
  </ScrollArea.Root>
</div>

CSS样式 #

.table-wrapper {
  width: 100%;
}

.table-header, .table-body {
  width: 100%;
  table-layout: fixed; /* 固定列宽，确保两表对齐 */
  border-collapse: collapse;
}

.table-header {
  position: sticky;
  top: 0;
  background: #fff; /* 背景色盖住下面滚动的内容 */
  border-bottom: 1px solid #eee;
}

.scroll-area {
  max-height: 400px; /* 自定义滚动区域高度 */
  overflow: hidden;
}

/* 可选：让表体的单元格和表头样式统一 */
.table-header th, .table-body td {
  padding: 8px 12px;
  border-right: 1px solid #eee;
}

这种方法完全符合HTML规范，不会有警告，还能保留Radix ScrollArea的自定义滚动条、触摸支持等功能。

思路2：纯CSS实现tbody滚动（不用Radix） #

如果不需要Radix的高级功能，直接用CSS改造单个表格，让tbody变成可滚动块：

代码结构 #

<table className="single-table">
  <thead>
    <tr>
      <th style={{width: '20%'}}>列1</th>
      <th style={{width: '30%'}}>列2</th>
      <th style={{width: '50%'}}>列3</th>
    </tr>
  </thead>
  <tbody>
    {/* 循环生成多行数据 */}
  </tbody>
</table>

CSS样式 #

.single-table {
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免滚动时列错位 */
  border-collapse: collapse;
}

.single-table thead tr {
  display: table; /* 保持表头的表格布局 */
  width: 100%;
}

.single-table tbody {
  display: block; /* 把tbody变成块级元素，才能设置滚动 */
  max-height: 400px;
  overflow-y: auto;
  width: 100%;
}

.single-table tbody tr {
  display: table; /* 让行保持表格布局，对齐表头 */
  width: 100%;
  table-layout: fixed;
}

这种方法不用额外拆分表格，代码更简洁，但滚动条是浏览器默认样式，没有Radix的定制能力。

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