jQuery.FixedTable

jQuery.FixedTable is a jQuery plugin to create a fixed header and columns on a HTML table. The idea is from https://www.open2space.com/projects/fixedtable. We have improved it, and fixed some bugs.

Feature

• Allow horizontal and vertical scroll.
• Support multiple HTML tables in one page.
• The number of fixed columns can be customize.
• The background colors of each row when mouse is over and out can be customized.

Files

Demo , Download: Source Code

Usage

To make a fixed table, you need to some javascript code and a <table> with the <thead> and <tfoot> in your page, and set the elements' class.

e.g.

                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.fixedtable.js"></script>
                <script type="text/javascript">
                // this "tableDiv" must be the table's class
                $(".tableDiv").each(function() {      
                    var Id = $(this).get(0).id;
                    var maintbheight = 555;
                    var maintbwidth = 911;

                    $("#" + Id + " .FixedTables").fixedTable({
                        width: maintbwidth,
                        height: maintbheight,
                        fixedColumns: 1,
                        // header style
                        classHeader: "fixedHead",
                        // footer style        
                        classFooter: "fixedFoot",
                        // fixed column on the left        
                        classColumn: "fixedColumn",
                        // the width of fixed column on the left      
                        fixedColumnWidth: 150,
                        // table's parent div's id           
                        outerId: Id,
                        // tds' in content area default background color                     
                        Contentbackcolor: "#FFFFFF",
                        // tds' in content area background color while hover.     
                        Contenthovercolor: "#99CCFF", 
                        // tds' in fixed column default background color   
                        fixedColumnbackcolor:"#187BAF", 
                        // tds' in fixed column background color while hover. 
                        fixedColumnhovercolor:"#99CCFF"  
                    });        
                });
                </script>
                

                <div id="tableDiv_Arrays" class="tableDiv">
                    <table id="Open_Text_Arrays" class="FixedTables">
                        <thead>
                            <tr>
                                <th>
                                    Purpose
                                </th>
                                <th>
                                    C#
                                </th>
                                <th>
                                    Php4
                                <th>
                                <th>
                                    Php5
                                </th>
                                <th>
                                    ActionScript
                                </th>
                                <th>
                                    JavaScript
                                </th>
                                <th>
                                    Ruby
                                </th>
                            </tr>
                        <thead>
                        <tbody>
                            <tr>
                                <th>
                                    data1
                                </th>
                                <th>
                                    data2
                                </th>
                                <th>
                                    data3
                                <th>
                                <th>
                                    data4
                                </th>
                                <th>
                                    data5
                                </th>
                                <th>
                                    data6
                                </th>
                                <th>
                                    data7
                                </th>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>
                                    Purpose
                                </th>
                                <th>
                                    C#
                                </th>
                                <th>
                                    Php4
                                <th>
                                <th>
                                    Php5
                                </th>
                                <th>
                                    ActionScript
                                </th>
                                <th>
                                    JavaScript
                                </th>
                                <th>
                                    Ruby
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                

note: if you do not need the footer, just remove the <tfoot> in your html code.