html - Not taking css property values to div generated by jQuery -

i have created

css

.tablescroll_wrapper { border-left:1;border-top:0; overflow-y:scroll; overflow-x:visible; width:1320px;height:300px;} 

jquery

;(function($){      var scrollbarwidth = 0;      // http://jdsharp.us/jquery/minute/calculate-scrollbar-width.php     function getscrollbarwidth()      {         if (scrollbarwidth) return scrollbarwidth;         var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');         $('body').append(div);          var w1 = $('div', div).innerwidth();          div.css('overflow-y', 'auto');         var w2 = $('div', div).innerwidth();          $(div).remove();          scrollbarwidth = (w1 - w2);         return scrollbarwidth;     }      $.fn.tablescroll = function(options)     {         if (options == 'undo')         {             var container = $(this).parent().parent();             if (container.hasclass('tablescroll_wrapper'))              {                 container.find('.tablescroll_head thead').prependto(this);                 container.find('.tablescroll_foot tfoot').appendto(this);                 container.before(this);                 container.empty();             }             return;         }          var settings = $.extend({},$.fn.tablescroll.defaults,options);          // bail out if there's no vertical overflow         if ($(this).height() <= settings.height)         {           return this;         }          settings.scrollbarwidth = getscrollbarwidth();          this.each(function()         {             var flush = settings.flush;              var tb = $(this).addclass('tablescroll_body');              // find or create wrapper div (allows tablescroll re-applied)             var wrapper;             if (tb.parent().hasclass('tablescroll_wrapper')) {                 wrapper = tb.parent();             }             else {                 wrapper = $('<div class="tablescroll_wrapper"></div>').insertbefore(tb).append(tb);             }              // check predefined container             if (!wrapper.parent('div').hasclass(settings.containerclass))             {                 $('<div></div>').addclass(settings.containerclass).insertbefore(wrapper).append(wrapper);             }              var width = settings.width ? settings.width : tb.outerwidth();              wrapper.css             ({                 'width': width+'px', //              'height': 300+'px',                 'height': settings.height+'px',                 'overflow': 'auto'             });              tb.css('width',width+'px');              // border difference             var wrapper_width = wrapper.outerwidth();             var diff = wrapper_width-width;              // assume table scroll             wrapper.css({width:((width-diff)+settings.scrollbarwidth)+'px'});             tb.css('width',(width-diff)+'px');              if (tb.outerheight() >= settings.height)             {                 wrapper.css({height:'auto',width:(width-diff)+'px'}); //              wrapper.css({height:'300',width:(width-diff)+'px'});                 flush = false;             }              // using wrap not put wrapper in dom right              // away making unavailable use during runtime             // tb.wrap(wrapper);              // possible speed enhancements             var has_thead = $('thead',tb).length ? true : false ;             var has_tfoot = $('tfoot',tb).length ? true : false ;             var thead_tr_first = $('thead tr:first',tb);             var tbody_tr_first = $('tbody tr:first',tb);             var tfoot_tr_first = $('tfoot tr:first',tb);              // remember width of last cell             var w = 0;              $('th, td',thead_tr_first).each(function(i)             {                 w = $(this).width();                  $('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px');                 $('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px');                 if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px');             });              if (has_thead)              {                 var tbh = $('<table class="tablescroll_head" cellspacing="0"></table>').insertbefore(wrapper).prepend($('thead',tb));             }              if (has_tfoot)              {                 var tbf = $('<table class="tablescroll_foot" cellspacing="0"></table>').insertafter(wrapper).prepend($('tfoot',tb));             }              if (tbh != undefined)             {                 tbh.css('width',width+'px');                  if (flush)                 {                     $('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarwidth)+'px');                     tbh.css('width',wrapper.outerwidth() + 'px');                 }             }              if (tbf != undefined)             {                 tbf.css('width',width+'px');                  if (flush)                 {                     $('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarwidth)+'px');                     tbf.css('width',wrapper.outerwidth() + 'px');                 }             }         });          return this;     };      // public     $.fn.tablescroll.defaults =     {         flush: true, // makes last thead , tbody column flush scrollbar         width: null, // width of table (head, body , foot), null defaults tables natural width         height: 100, // height of scrollable area         containerclass: 'tablescroll' // plugin wraps table in div css class     };  })(jquery); 

when inspect in browser result :

<div class="tablescroll_wrapper" style="height: auto; overflow: auto; width: 1361px;"> 

i want add horizontal scroll bar how can that,can me solve issue?

thank you, udeshika

in code, set wrapper css:

wrapper.css         ({             'width': width+'px', //          'height': 300+'px',             'height': settings.height+'px',             'overflow': 'auto'         }); 

and result expected:

<div class="tablescroll_wrapper" style="height: auto; overflow: auto; width: 1361px;">

if want horizontal scrollbars, need make sure css this:

overflow-y:visible; overflow-x:scroll; 

hence, wrapper code should this.

wrapper.css         ({             'width': width+'px',             'height': settings.height+'px',             'overflow-x': 'scroll',             'overflow-y': 'visible'         });