CSS: Implementing Fixed Header scroll in a Table that contains multiple <tbody> tags?

Question

This is the table structure that I have:

                <table>
                        <thead >
                            <tr>
                                <th >Header 1</th>
                                <th >Header 1</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                        </tbody>
                            <tbody>
                            <tr>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                        </tbody>
                </table>

I have multiple tbody tags to support a nested ng-repeat structure with spanned rows hence it is inevitable to have the tbody tags. However, I am now unable to put these tbody tags in a valid container and set the overflow-y as auto inorder to bring in the scroll bar just for the table data and not including the thead (headers)

Help will be appreciated!

make your headers fixed on the top, or make it fixed with 2 different tables: 1st with headings, second - with data — Andrew Evt
Two table is the simplest solution but there is a tremendous problem of alignment of column widths between the two tables — lostalien

Deepak Sharma Deepak Sharma · Accepted Answer · 2016-01-29T09:19:11

first thing to consider of multiple tbody. you can do your task without using of multiple tbody as it is not a good approach.

Aside you can use Table FloadHead plug in. probably it will help in making headers fixed.

CSS: Implementing Fixed Header scroll in a Table that contains multiple <tbody> tags?

1 Answers