javascript - 当另一行的折叠状态发生变化时，表格行布局会发生变化

Question

我有以下 Mui 组件：

<TableRow>
   <TableCell>
   /* 5 cells */
                    /* bug: row layout wiggles/shifts  */
   ...
   </TableCell> 
</TableRow>
<TableRow>
   <TableCell colSpan={5}> 
      <Collapse in={showDetail}>
         /* detail view */
      </Collapse>
   </TableCell> 
</TableRow>

当我切换showDetail道具时，第一行中的布局“移动/摆动”。

如何设置第一行的动态宽度，以便布局在每个切换状态下保持相同？...或反之亦然：确保详细视图呈现在顶行的范围内？

感谢这里有想法的人。

标签： javascripthtmlcssreactjsmaterial-ui