StickyTableHeaders

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script src="/home/bhavani/Desktop/jquery.freezeheader.js"></script>
	<script src="/home/bhavani/Projects/Effort/src/main/webapp/resources/js/jquery.stickytableheaders.min.js"></script>
	<body style="overflow-x:hidden;overflow-y:hidden;">
		<div class="scrolling" style="height:200px;overflow-y:scroll;overflow-x:scroll;">
		<table border="1" id="tableid">
			<thead  class="thwidth">
			<tr>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th><th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father Name</th>
				<th>Id</th>
				<th>Student Name</th>
				<th>Father...

CSS

th{
			background:black;
			color:white;
		}

JavaScript

$(document).ready(function () {
			$("#tableid").stickyTableHeaders({scrollableArea: $('.scrolling')});
			
			alert($("#tableid").width());
			$(".scrolling").css("width",$("#tableid").width());
			alert($(".scrolling").width())
		});

/*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
	MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */

;
(function ($, window, undefined) {
    'use strict';

    var name = 'stickyTableHeaders',
        id = 0,
        defaults = {
            fixedOffset: 0,
            leftOffset: 0,
            marginTop: 0,
            scrollableArea: window
        };

    function Plugin(el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        base.id = id++;
        base.$window = $(window);
        base.$document = $(document);

        // Listen for destroyed, call teardown
        base.$el.bind('destroyed',
        $.proxy(base.teardown, base));

        // Cache DOM refs for performance reasons
        base.$clonedHeader = null;
        base.$originalHeader = null;

        // Keep track of state
        base.isSticky = false;
        base.hasBeenSticky = false;
        base.leftOffset = null;
        base.topOffset = null;

        base.init = function () {
            base.$el.each(function () {
                var $this = $(this);

                // remove padding on <table> to fix issue #7
                $this.css('padding', 0);

                base.$originalHeader = $('thead:first', this);
                base.$clonedHeader = base.$originalHeader.clone();
                $this.trigger('clonedHeader.' + name, [base.$clonedHeader]);

                base.$clonedHeader.addClass('tableFloatingHeader');
               ...