CODEWITHSUNDEEP
javascripthtmlcss
Ryan
Ryan

Reputation: 15270

How can I group a set of table rows to overflow scroll (without using thead or tbody)?

I have a table with 100 rows. My thead and tbody are already used. But I need to allow another set of table rows scroll without making the rest of the page scroll. How can I do this?

Here's a fiddle http://jsfiddle.net/hMEuC/ and here's some markup:

<table>
    <thead><tr><th>header</th></tr></thead>
    <tbody>
        <tr><td>abc<td></tr>
        <tr><td>def<td></tr>
        <tr><td>ghi<td></tr>

        <!-- Can I make these rows overflow auto scroll? -->

        <tr><td>abc<td></tr>
        <tr><td>def<td></tr>
        <tr><td>ghi<td></tr>
        ...
        <tr><td>xyz<td></tr>

        <!-- end hopeful autoscroll box -->

    </tbody>
</table>

Upvotes: 2

Views: 146

Answers (1)

Sampson
Sampson

Reputation: 268354

It is perfectly legal (See content model) to use multiple tbody elements within a table. If you have a set of table rows that you would like to target, wrap them in their own tbody, and target that.

You will have to set the display of the second tbody to something like block so that you can set the overflow of y-axis to auto. This will require re-working the nested tr and td elements as well.

Fiddle: http://jsfiddle.net/sycAT/2/

Upvotes: 2

Related Questions