Wrapper for multiple ?

Question

For specific css requirements I'm using multiple <tbody> tags in my table design which looks something like this:

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)

Check this: http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table — vaso123, Nov 27 '14 at 15:53
@lolka_bolka that question deals with the possibility of having multiple tbody tags. I have just implemented the most upvoted answer in my first fiddle. What i required was a WRAPPER for multiple tbody tags. — Nikunj Madhogaria, Nov 27 '14 at 15:56
The only valid wrapper is the table element, and it also encloses thead, tfoot and all tbody of course. — FelipeAls, Nov 27 '14 at 16:01

score 4 · Accepted Answer · answered Nov 27 '14 at 19:23

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.

score 2 · Answer 2 · answered Nov 27 '14 at 18:14

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.

as I mentioned in the question, I need separate tbody tags to wrap two rows (one containing cells and other containing a textual row- which may be absent/present, as I have shown in the fiddle) so that I can apply specific css to these two rows collectively irrespective of the presence/absence of the textual row. — Nikunj Madhogaria, Nov 27 '14 at 18:56
You didn’t mention that in the question. In any case, styling of some adjacent `tr` elements is possible without a wrapper. If you think you have a different case, it should be explained *in the question itself*, in a new question. As regards to the question asked here, I think my answer is a correct one. — Jukka K. Korpela, Nov 27 '14 at 19:02

Wrapper for multiple ?

2 Answers2