About It

    TableHeadFixer is a simple jQuery plugin for fixer HTML tables header, footer or columns. This plugin will only add elements events and css attributes necessary for fix tables header, footer or columns, you can customize styles of your table, this plugin will not influence style of table (width, height, background, font color, etc…)

    Download

    Maybe you will need click mouse right button > Save As, for Download this plugin.

    Demos

    Fix header

    Year Jan Fev Mar Apr Mai Total
    2011 100.00 100.00 100.00 100.00 100.00 500.00
    2012 100.00 100.00 100.00 100.00 100.00 500.00
    2013 100.00 100.00 100.00 100.00 100.00 500.00
    2014 100.00 100.00 100.00 100.00 100.00 500.00
    2015 100.00 100.00 100.00 100.00 100.00 500.00
    2016 100.00 100.00 100.00 100.00 100.00 500.00
    2017 100.00 100.00 100.00 100.00 100.00 500.00
    2018 100.00 100.00 100.00 100.00 100.00 500.00
    2019 100.00 100.00 100.00 100.00 100.00 500.00
    2020 100.00 100.00 100.00 100.00 100.00 500.00
    2021 100.00 100.00 100.00 100.00 100.00 500.00
    2022 100.00 100.00 100.00 100.00 100.00 500.00
    2023 100.00 100.00 100.00 100.00 100.00 500.00
    2024 100.00 100.00 100.00 100.00 100.00 500.00
    2025 100.00 100.00 100.00 100.00 100.00 500.00
    2026 100.00 100.00 100.00 100.00 100.00 500.00
    2027 100.00 100.00 100.00 100.00 100.00 500.00
    2028 100.00 100.00 100.00 100.00 100.00 500.00
    2029 100.00 100.00 100.00 100.00 100.00 500.00

    Javascript code:

    $(document).ready(function() {
	$("#demo1").tableHeadFixer();
});

    Fix Left column

    Year Jan Fev Mar Apr Mai Total
    2011 100.00 100.00 100.00 100.00 100.00 500.00
    2012 100.00 100.00 100.00 100.00 100.00 500.00
    2013 100.00 100.00 100.00 100.00 100.00 500.00

    Javascript code:

    $(document).ready(function() {
	$("#demo2").tableHeadFixer({'head':false, 'left':1});
});

    Fix Right column

    Year Jan Fev Mar Apr Mai Total
    2011 100.00 100.00 100.00 100.00 100.00 500.00
    2012 100.00 100.00 100.00 100.00 100.00 500.00
    2013 100.00 100.00 100.00 100.00 100.00 500.00

    Javascript code:

    $(document).ready(function() {
	$("#demo3").tableHeadFixer({'head':false, 'right':1});
});

    More examples in Github

    How To

    Step 1

    As this plugin is a plugin for jQuery, is necessary include jQuery in your page head

    <script src="jquery.min.js"></script>

    Step 2

    Put table where you want fix header or column, in a div container

    <div>
    <table id="fixMe">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Birthday</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                ...
            </tr>
        </tbody>
    </table>    
</div>

    Step 3

    Fix head

    In your script, execute .tableHeadFixer(); for table where you want fix header, after page load

    $(document).ready(function() {
	// This line will be fix table header
    $("#fixMe").tableHeadFixer();
});

    Fix column

    For you set column fix, is necessary pass a parameter for the function .tableHeadFixer(); with count of column will fix.

    $(document).ready(function() {
	// This line will be fix first left column, and disabled table header fix
    $("#fixMe").tableHeadFixer({'left' : 1, 'head' : 'false'});
});

    **Bonus Step!!**

    Why Fix Column Is Not Working!?

    So, this problem is occured, because your table width is smaller or equal div container, so horizontal scroll will not showing for you

    You can set a table width fix (px) and bigger then div container, for showing horizontal scroll

    Of course, you can do this with any other ways you prefer.

    Parameters

    You can pass the fallowing parameters for set where you want fix.

    .tableHeadFixer({
    'head' : 'true',    // true or false, default is true
    'foot' : 'false',   // true or false, default is false
    'left' : 0,         // 1, 2, 3, etc, default is 0
    'right' : 0         // 1, 2, 3, etc, default is 0
});