多个包装 <tbody> ？

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?

(PS: I know this can be done through nested table approach, but I'm looking for other alternatives if any)

Answer 1

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.

Answer 2

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 .