fixed width scroll

HTML

<div class="search-table-outter wrapper">
	<table class="search-table inner">
		<tr>
			<th>Col1</th>
			<th>Col2</th>
			<th>Col3</th>
			<th>Col4</th>
			<th>Col5</th>
			<th>Col6</th>
			<th>Col7</th>
			<th>Col8</th>
			<th>Col9</th>
			<th>Col10</th>
		</tr>
        <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
    <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
    <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
    <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
    <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
    <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
    <tr>
			<td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
      <td>bla-bla</td>
		</tr>
   ...

CSS

.search-table-outter {border:2px solid red;overflow-x:hidden;position:relative;}
.search-table{table-layout:fixed;margin:0px auto;}
.search-table, td, th{border-collapse:collapse;border:1px solid #777;}
th{padding:20px 40px;font-size:15px;color:#444;background:#66C2E0;}
td{padding:5px 10px;height:35px;text-align:center;}
#w-scroll {position:absolute;width:100%;height:auto;overflow-x:scroll}
#w-scroll .scroll {height:1px;}

JavaScript

$(function() {
	$('#w-scroll .scroll').css({width: $('.search-table').outerWidth()});
  $('#w-scroll').scroll(function() {
  	$('.search-table-outter').scrollLeft($(this).scrollLeft());
    $(this).css({left: $(this).scrollLeft()});
  });
  $(window).scroll(function() {
  	if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){
    	$('#w-scroll').css({top: $(window).height() + $(window).scrollTop() - 20, bottom: 'auto'});
    }else{
      $('#w-scroll').css({top: 'auto', bottom: 0});
    };
  });
  $('#w-scroll').each(function() {
  	if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){
    	$(this).css({top: $(window).height() + $(window).scrollTop() - 20, bottom: 'auto'});
    }else{
      $(this).css({top: 'auto', bottom: 0});
    };
  });
});