Wrapper for multiple <tbody>? - html

Question

For specific css requirements I'm using multiple <tbody> tags in my table design which looks something like this:
Use of multiple tbody tags
But I also require a wrapper for multiple tbody tags (something like a common tbody parent) such that this wrapper can be scrolled in order achieve the following effect:
A common tbody which can be scrolled
How do I achieve the latter srolling effect in the former one?
(P.S.: I know this can be done through nested table approach, but I'm looking for other alternatives if any)

Answer 1

As mentioned in the comments by FelipeAls and others that a <tbody> tag can be wrapped only by a <table> tag, I tried wrapping <thead> and <tbody>s in separate tables to create the desired effect in the following way:
<table>
<thead>
...
</thead>
</table>
<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>
This solved the issue.
Here's a Working Demo.

Answer 2

You cannot have a wrapper for tbody elements inside a table. The tbody element itself is a wrapper for tr elements. HTML syntax does not allow any other container for tbody but table. What matters more is that this syntax rules is actually enforced by the way browsers parse HTML.
If you try to use, say, a div element as a wrapper (the most reasonable approach), it will actually create a div element in the DOM, but an empty one, and before the table. All the tbody and tr elements are inserted into the table element; they are effectively extracted from the div element, which thus becomes empty, unless it contains something else than table-related elements.
An illustration, using intentionally invalid markup:
<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>
The conclusion is that you need a different approach. The most obvious one is to use just a single tbody element. If this is not feasible, you should explain why, but this would be a topic for a new question.