Shadcn-UI Sticky header not working fix

问题：将一个数据表设置为header固定，但不起作用，尝试在表头和表头添加类名 "sticky top-0 z-10"，但仍然不起作用。

<div className='relative rounded-md border overflow-auto max-h-[40vh] no-scrollbar'>
            <Table>
              <TableHeader className='sticky top-0 bg-gray-100 z-100'>
                <TableRow>
                  <TableHead className='w-[80px] '>排名</TableHead>
                  <TableHead>玩家名称</TableHead>
                  <TableHead>玩家id</TableHead>
                  <TableHead>比赛记录</TableHead>
                  <TableHead>联盟积分</TableHead>
                </TableRow>
              </TableHeader>
...
</div>

解决方式：找到Table的相关代码，并作如下修改

// function Table({ className, ...props }: React.ComponentProps<"table">) {
//   return (
//     <div
//       data-slot="table-container"
//       className="relative w-full overflow-x-auto"
//     >
//       <table
//         data-slot="table"
//         className={cn("w-full caption-bottom text-sm", className)}
//         {...props}
//       />
//     </div>
//   )
// }
const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <table
    ref={ref}
    className={cn('w-full caption-bottom text-sm', className)}
    {...props}
  />
));
Table.displayName = 'Table';