HTML Table with multiple fixed rows

Question

I am trying to freeze first top three rows of my table while scrolling down.

Here's my code:

<table>
    <thead>
        <tr>
            <th>Item#</th>
            <td>12766</td>
        </tr>
        <tr>
            <th>LOC</th>
            <td>OWH</td>
        </tr>
        <tr>
            <th>Size/Qty</th>
            <td>12</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>SAlES</th>
            <td>32132</td>
        </tr>
        <tr>
            <th>SAlES</th>
            <td>32132</td>
        </tr>
        <tr>
            <th>SAlES</th>
            <td>32132</td>
        </tr>
    </tbody>
</table>

I searched for many jQuery plugins, but they don't support multiple rows freezing.

Please advise.

If these first three rows have a special meaning, that would most likely justify putting them into a `thead` … and then you could fix that instead. — CBroe, Aug 30 '14 at 00:20
have a look [**here**](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) — BeNdErR, Aug 30 '14 at 00:40

score 1 · Accepted Answer · answered Aug 30 '14 at 01:59

1

This plugin was useful, just as @CBroe mentiond, I have to put rows into thead first, then I used this plugin:

http://mkoryak.github.io/floatThead/#usage

answered Aug 30 '14 at 01:59

CairoCoder

3,091
11
46
68

HTML Table with multiple fixed rows

1 Answers1