Submit your widget
HomeTableFixed Headers Scrolling Tables With jQuery

Fixed Headers Scrolling Tables With jQuery

Created 12 years ago   Views 39790   downloads 7099    Author chromaloop
Fixed Headers Scrolling Tables With jQuery
View DemoDownload
100
Share |

the scrolling tables with fixed headers. and will take the exercise a step further by creating a jQuery plugin to keep the code contained in one location and allow users to call the "chromatable()" method on any table, or many tables on the same page.

To make the plugin work, you'll need to add the following to the head of your HTML:

    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.chromatable.js"></script>

Then, call the chromatable() method on any table within your code, for example:

    $(document).ready(function(){
    $("#yourTableID").chromatable();
    });

You can modify the table's height and width by adding the following lines:

    $("#yourTableID2").chromatable({
     
    width: "900px",
    height: "400px",
    scrolling: "yes"
     
    });

Version 1.2.0 supports table widths set to a fixed pixel dimension, auto, or 100%. You may see unexpected formatting results if you specify the table too narrow to accommodate your columns.

Known problems

Some peeps have reported issues in IE6 and Opera. Although I don't plan to support IE6 in the near future, I will be looking into a future release to fix problems in Opera.

The article source:http://www.chromaloop.com/posts/chromatable-jquery-plugin

You might also like