在shadcn/ui中实现表头固定表体滚动后，表体缩列问题如何修复？

AI 小北

2026-6-28

修复固定表头+滚动表体时列对齐失效的问题

你遇到的问题根源是给TableBody添加了block类，破坏了表格默认的布局规则，导致表体单元格无法和表头列对齐，全部挤到第一列里了。

修复步骤：

移除TableBody上的block类，保留overflow-y-auto和h-[500px]来实现滚动效果
给每个TableCell加上对应TableHead的宽度类，确保列宽完全匹配
外层Table添加table-fixed类（Tailwind样式），强制表格按设置的列宽渲染，避免内容撑开列

修改后的代码：

export default function TransactionTable() {
  return (
    <Table className="table-fixed">
      <TableHeader className="">
        <TableRow>
          <TableHead className="w-1/5 px-2 py-1">Date</TableHead>
          <TableHead className="w-2/5 px-2 py-1">Title</TableHead>
          <TableHead className="w-1/5 px-2 py-1">Category</TableHead>
          <TableHead className="w-1/5 px-2 py-1">Amount</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody className="overflow-y-auto h-[500px]">
        {transactions.map((t) => (
          <TableRow key={t.id}>
            <TableCell className="w-1/5 px-2 py-1">{t.date}</TableCell>
            <TableCell className="w-2/5 px-2 py-1">{t.title}</TableCell>
            <TableCell className="w-1/5 px-2 py-1">{t.category}</TableCell>
            <TableCell className="w-1/5 px-2 py-1">{t.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}