我正在尝试将 Material-UI 的 Accordion 组件集成到表格中以显示交易数据。具体来说，我想要两个手风琴：“待处理”和“已发布”。这个想法是，单击每个手风琴将展开或折叠与该类别关联的表格行。
但是，我面临的问题是手风琴仅跨越表格的第一列。我已设法使用 colSpan 属性使 Accordion 跨越所有列，但 Accordion 内的数据/内容并未跨越所有列。相反，它仅限于第一列。
这里是 CodeSandbox 的链接，了解我已经尝试过的内容以及现在的样子。
有人在 Stackoverflow 上发布了这个答案，但它仍然存在与我面临的相同问题。
这就是我想要的样子。单击“待处理”和“已发布”将展开/折叠相应的交易图片链接
这就是我解决这个问题的方法。该解决方案在没有手风琴的情况下也适用。
https://codesandbox.io/p/sandbox/ancient-monad-pt8hjv
基本上，您可以在主表中创建一个全新的表。
在单个 TableCell 中添加所有 Accordion/嵌套逻辑，并添加 colSpan 以匹配 TableHead 的项目长度。
然后在 Accordion 中创建一个新表格，并为每个 TableCell 匹配 TableHead 中的列宽度。