Html 表行下的可扩展区域（语义UI）

我正在尝试在一个表中创建表行，通过单击它们（单独）可以进行扩展

例如，如果我单击下图中的指定区域，一个段/容器（某种区域）将下拉，其中包含内容

我尝试了前面提到的解决方案，但潜在的问题是表行/单元格下的每个元素都受表头单元格的规则和边界的约束。例如，如果我尝试创建一个表行，其下有一个段，结果如下所示：

如您所见，该段位于新行内，但仅限于HeaderCell的大小

执行此操作时，我还收到以下错误：

validateDOMNesting(...): <div> cannot appear as a child of <tr>.
    in div (created by Segment)

validateDOMNesting（…）：不能显示为的子级。
在div中（按段创建）

因此，表行下的段似乎是禁止的元素结构

---

您知道元素结构应该如何在表行下创建某种区域吗？

不允许将

作为表行的子行的警告告诉您它不是有效的HTML。无论您使用的是语义UI React还是普通HTML，这都是正确的

我建议您在表中已有的行下面再渲染一行。在该行内设置一列，该列跨越所有列。现在您有了一个容器，如果您愿意，可以将其他UI放入其中。如果出于某种原因需要，可以自定义宽单元格的样式

然后，您可以在表格的可单击区域设置切换状态。您可能希望将单击事件放在单元格的内容上，而不是单元格本身

我拼凑了一个快速的代码笔，显示这是如何工作的。这为您提供了一个可以根据您的用例进行修改的工作概念