Question

对于特定的css要求，我在表格设计中使用了多个<tbody>标签，如下所示：

但我还需要 包装多个tbody标签 （类似于常见的tbody父级），以便可以滚动 包装器 为了达到以下效果：

A common tbody which can be scrolled

如何在前者中实现后者的滚动效果？

（P.S。：我知道这可以通过嵌套表方法完成，但我正在寻找其他替代方案）

Answer 1

您不能在表格中拥有tbody元素的包装器。 tbody元素本身是tr元素的包装器。 HTML语法不允许tbody但table的任何其他容器。更重要的是，这种语法规则实际上是由浏览器解析HTML的方式强制实施的。

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

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

＆＃13;

<style>
.x { outline: solid red }
</style>
<table>
<tbody>
<tr><td>foo
</tbody>
<div class=x>
FOO!
<tbody>
<tr><td>foo2
</tbody>
<tbody>
<tr><td>foo3
</tbody>
</div>
<tbody>
<tr><td>The end
</tbody>
</table>

＆＃13;

结论是你需要一种不同的方法。最明显的一个是仅使用一个tbody元素。如果这不可行，你应该解释原因，但这将是一个新问题的主题。

Answer 2

正如FelipeAls和其他人的评论中提到的，<tbody>标记只能由<table>标记包装，我尝试将<thead>和<tbody>分开包装表以下列方式创建所需的效果：

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

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

这解决了这个问题。

这是 Working Demo 。

多个包装？

2 个答案: