如何在 shadcn 表格组件中添加水平滚动条

Question

<DataTableToolbar
        table={table}
        filterBy={filterBy}
        placeholder={filterPlaceholder}
        status={status}
        button={filterActionButton}
        back={back}
      />
      <div className={cn(tableShellClassName)}>
        {isPending ? (
          <TableSkeletonMemoized tableShellClassName="px-0" />
        ) : (
          <div
            className={cn(
              "!overflow-scroll rounded-md border !scrollbar scrollbar-thumb-neutral-600",
              className
            )}
            key="table">
            <Table className="size-full !overflow-scroll !scrollbar scrollbar-thumb-neutral-600">
              <TableHeader>
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => (
                      <TableHead key={header.id} colSpan={header.colSpan}>
                        {!header.isPlaceholder && (
                          <span
                            style={{
                              whiteSpace: "nowrap",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              fontSize: "1rem",
                            }}>
                            {flexRender(header.column.columnDef.header, header?.getContext())}
                          </span>
                        )}
                      </TableHead>
                    ))}
                  </TableRow>
                ))}
              </TableHeader>
              <TableBody className="!overflow-scroll !scrollbar scrollbar-thumb-neutral-600">
                {!noRecordsFound ? (
                  table.getRowModel().rows.map((row) => {
                    return (
                      <TableRow
                        key={row.id}
                        data-state={row.getIsSelected() && "selected"}
                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
                        onClick={() => handleDataRecordClick(row)}>
                        {row.getVisibleCells().map((cell) => {
                          return (
                            <TableCell key={cell.id} className="px-2 hover:cursor-pointer">
                              <span
                                style={{
                                  whiteSpace: "nowrap",
                                  overflow: "hidden",
                                  textOverflow: "ellipsis",
                                }}>
                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                              </span>
                            </TableCell>
                          );
                        })}
                      </TableRow>
                    );
                  })
                ) : (
                  <TableRow>
                    <TableCell colSpan={columns.length} className="h-40 text-center">
                      <div className="flex max-w-[calc(100dvw-2rem)] flex-col items-center justify-center py-52">
                        <Image
                          src="/illustrations/empty-table.svg"
                          className="size-44 object-contain"
                          width={320}
                          height={320}
                          alt="No records found so far."
                        />
                        <p className="text-neutral-500">No Records Found.</p>
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        )}
      </div>
      <DataTablePagination table={table} />

这是我的数据表组件代码。我有 7 列，它向右溢出。如果您使用的是笔记本电脑，则可以使用触摸板轻松水平滚动，如果您使用的是电脑，则可以使用箭头键，但我想这样做，以便有一个水平滚动条可见并且能够滚动。

我知道我向任何可能的组件/HTML 标记添加了许多“溢出滚动”类，但它们都不起作用。我只能看到垂直滚动条，看不到水平滚动条。

有人可以帮我解决这个问题吗？我只想要一个可用于水平滚动的水平滚动条

Answer 1

我换了浏览器。以前我使用 arc，但是当我切换到 chrome i chrome 时，我可以看到滚动条。在 Mac 上，默认情况下你在任何浏览器上都看不到任何可见的滚动条