相当有用的Table Row And Col Fix方法。

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.