jquery-freeze-table-items

jQuery plugin for freeze table header and first column

How to use it:

1. Place the main JavaScript file index.js after jQuery library and the plugin is ready for use.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>

1. If you want to make the table header and first column sticky on page scroll, you should call the plugin as following.

$('#my-table').freezeTableItems();

Or

$('#my-table').freezeTableItems({freezeHeader: true, freezeFirstColumn: true});

Use html structure which contains wrapper, scrollable area and table as a child.

<style>
    #example1-block {
        width: 500px;
    }
    #my-table td,
    #my-table th {
        width: 200px;
        min-width: 200px;
    }
</style> 
<div id="example1-block">
    <div class="wrapper">
        <div class="scrollable-area">
            <table id="my-table">
                <thead>
                    <tr>
                        <th>One</th>
                        <th>Two</th>
                        <th>Three</th>
                        <th>Four</th>
                        <th>Five</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

If you want more, you can show the example.html from "example" folder.