Fixed Table Header And Scrolling Body

Posted by user2881191 on Stack Overflow See other posts from Stack Overflow or by user2881191
Published on 2013-10-29T03:50:39Z Indexed on 2013/10/29 3:53 UTC
Read the original article Hit count: 243

Filed under:
|
|

can Anyone please help me with the example that is on site

'http://mkoryak.github.io/floatThead/examples/inner-scroll/'

How Can i Apply the Jquery to the below example. please provide Me the Demo in JSFiddle.

I Want to Make My Table Header Fixed With Scrolling (both horizontal and vertical) Body.

If Possible I also need to make the last column Fixed as the Header.

Please Help Me Reageding the Issue. I Have Been Stuck For a Week.

Below Is My test Code For which I need to apply the style as in the above link or any other better approach.

Css :

    #table-container{
        background-color :white;
        overflow:auto;
        position:absolute;
        top : 0px;
        bottom : 18px;
        width : 100%;
        z-index: 1;
        } 

Jsp :

    <div id="table-container">
        <table id="maintable" style="width: 100%">
            <thead>
                <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                    <th>Col 6</th>
                    <th>Col 7</th>
                    <th>Col 8</th>
                    <th>Col 9</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
         </tbody>
    </table>
    </div>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css