Html 多个的包装器？

对于特定的css需求，我在表设计中使用了多个标记，如下所示：

但我还需要一个用于多个tbody标记的包装器，类似于公共tbody父项，这样可以滚动此包装器以实现以下效果：

如何在前一种情况下实现后一种滚动效果

---

注意：我知道这可以通过嵌套表的方法来实现，但我正在寻找其他的替代方法，如果有的话

您不能在表中为tbody元素使用包装器。tbody元素本身是tr元素的包装器。HTML语法不允许tbody使用任何其他容器，只允许使用table。更重要的是，这种语法规则实际上是通过浏览器解析HTML的方式强制执行的

如果您尝试使用（比如）一个div元素作为最合理的方法的包装器，它实际上会在DOM中创建一个div元素，但在表之前创建一个空的div元素。所有tbody和tr元素都插入到table元素中；它们有效地从div元素中提取，因此div元素变为空，除非它包含与表相关的元素以外的内容

使用故意无效标记的图示：

.x{轮廓：纯红色} 福 福！ 食物2 foo3 结局

---

表中不能有tbody元素的包装器。tbody元素本身是tr元素的包装器。HTML语法不允许tbody使用任何其他容器，只允许使用table。更重要的是，这种语法规则实际上是通过浏览器解析HTML的方式强制执行的

如果您尝试使用（比如）一个div元素作为最合理的方法的包装器，它实际上会在DOM中创建一个div元素，但在表之前创建一个空的div元素。所有tbody和tr元素都插入到table元素中；它们有效地从div元素中提取，因此div元素变为空，除非它包含与表相关的元素以外的内容

使用故意无效标记的图示：

.x{轮廓：纯红色} 福 福！ 食物2 foo3 结局

---

正如FelipeAls和其他人在评论中提到的，标记只能由标记包装，我尝试在单独的表中包装和s，以以下方式创建所需的效果：

<table>
    <thead>
        ...
    </thead>
</table>

<table>
    <tbody>
        ...
    </tbody>
    <tbody>
        ...
    </tbody>
    <tbody>
        ...
    </tbody>
</table>

这就解决了问题

---

这里有一个。

正如FelipeAls和其他人在评论中提到的，标签只能由标签包装，我尝试在单独的表中包装和，以以下方式创建所需的效果：

<table>
    <thead>
        ...
    </thead>
</table>

<table>
    <tbody>
        ...
    </tbody>
    <tbody>
        ...
    </tbody>
    <tbody>
        ...
    </tbody>
</table>

这就解决了问题

---

这里有一个。

检查：@lolka\u bolka这个问题涉及到有多个tbody标签的可能性。我刚刚在我的第一把小提琴中实现了最上乘的答案。我需要的是多个tbody标记的包装器。唯一有效的包装器是table元素，当然它还包含thead、tfoot和所有tbody。只需使用a作为包装器。检查：@lolka\u bolka该问题涉及多个tbody标记的可能性。我刚刚在我的第一把小提琴中实现了最上乘的答案。我需要的是多个tbody标记的包装器。唯一有效的包装器是table元素，它当然也包含thead、tfoot和所有tbody。只需使用a作为包装器。正如我在问题中提到的，我需要单独的tbody标记来包装两行，一行包含单元格，另一行包含文本行-可能不存在/存在，正如我在小提琴中所展示的那样，我可以对这两行应用特定的css，而不管文本行是否存在。你在问题中没有提到这一点。在任何情况下，在没有包装器的情况下，一些相邻tr元素的样式都是可能的。如果你认为你有不同的情况，应该在问题本身，在新的问题中解释。关于这里提出的问题，我认为我的答案是正确的。正如我在问题中提到的，我需要单独的tbody标记来包装两行，一行包含单元格，另一行包含文本行-可能不存在/存在，正如我在小提琴中所展示的那样，我可以对这两行应用特定的css，而不管文本行是否存在。你在问题中没有提到这一点。在任何情况下，在没有包装器的情况下，一些相邻tr元素的样式都是可能的。如果你认为你有不同的情况，应该在问题本身，在新的问题中解释。关于这里提出的问题，我认为我的答案是正确的。