如何在Nuxt UI Table组件中实现表头吸顶效果？

有效代码示例 #

给表格外层容器设置固定高度与垂直滚动，同时完善表头样式：

<section class="h-[600px] overflow-y-auto">
  <UTable
    :ui="{ 
      th: { base: 'sticky top-0 bg-white z-10' },
      table: { base: 'min-w-full' }
    }"
    :columns="columns"
    :rows="people"
  />
</section>

核心调整说明 #

• 容器添加h-[600px] overflow-y-auto：指定滚动区域，让表格内容在容器内滚动，这是sticky生效的前提
• 表头th补充bg-white z-10：避免滚动时下方内容穿透表头，同时设置层级确保表头始终在内容上方
• 表格添加min-w-full：保证表格宽度铺满容器，防止列错位

原代码无效原因 #

之前仅给th加sticky top-0，但外层容器没有设置滚动区域，页面整体滚动时sticky的参照是整个视口而非表格容器；同时缺少背景色，滚动时内容会透过表头显示，视觉上看起来没生效。

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