Css 可折叠可展开的数据表行：如何使Shadcn数据表中的可折叠内容全宽

我正在try 构建一个数据表，其中的每一行都可以展开/折叠.点击最左边的箭头，展开彩色内容，如下图所示.这工作得很好，但是展开部分的内容只有第一列那么宽.如何才能使展开的部分与整个表格一样宽(由红色箭头指示)？

我正在使用Shadcn-UI(https://ui.shadcn.com/docs/components/data-table).

以下是代码:

//page.tsx

import { DataTable } from "./data-table";
import { Row, columns } from "./columns";

export default async function CollapsibleTablePage() {
  const data: [Row] = [
    {
      column1: "Hi from outer column 1 and row 1",
      column2: "Hi from outer column 2 and row 1",
      collapsibleContent: "Hi from collapsible content and row 1",
    },
    {
      column1: "Hi from outer column 1 and row 2",
      column2: "Hi from outer column 2 and row 2",
      collapsibleContent: "Hi from collapsible content and row 2",
    },
    {
      column1: "Hi from outer column 1 and row 3",
      column2: "Hi from outer column 2 and row 3",
      collapsibleContent: "Hi from collapsible content and row 3",
    },
  ];

  return (
      <DataTable columns={columns} data={data} />
  );
}

//columns.tsx

"use client";

import { ColumnDef } from "@tanstack/react-table";
import { ChevronDown, Copy } from "lucide-react";
import { Button } from "@/components/shadcn/ui/button";
import { CollapsibleTrigger } from "@/components/shadcn/ui/collapsible";

export type Row = {
  column1: string;
  column2: string;
  collapsibleContent: string;
};

export const columns: ColumnDef<Row>[] = [
  {
    accessorKey: "column1",
    header: "column1",
    cell: ({ row }) => {
      return (
        <div className="flex items-center">
          <CollapsibleTrigger>
            <Button variant="ghost">
              <ChevronDown className="h-4 w-4" />
            </Button>
            {row.getValue("column1")}
          </CollapsibleTrigger>
        </div>
      );
    },
  },
  {
    accessorKey: "column2",
    header: "column2",
  },
];

//data-table.tsx

"use client";

import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/shadcn/ui/table";

import {
  Collapsible,
  CollapsibleContent,
} from "@/components/shadcn/ui/collapsible";
import React from "react";
import { Row } from "./columns";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  var CollapsibleRowContent = ({ row }: { row: Row }) => (
    <div className="p-20">{row.collapsibleContent}</div>
  );

  return (
    <div>
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                );
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows.map((row) => (
            <Collapsible key={row.id} asChild>
              <>
                <TableRow>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
                <CollapsibleContent className="bg-slate-700">
                  <CollapsibleRowContent row={row.original} />
                </CollapsibleContent>
              </>
            </Collapsible>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}