So I have to add a second scroll bar at the top of the data table (in addition to the horizontal one that appears at the bottom)
So far I've been able to add it, sync it up with the the other scrollbar, and align it with the table.

The trouble I'm currently having is that I don't know how to dynamically change the scrollbar's size (width more specifically) to match that of the datatable's scroll bar. Does anyone know how to match the sizes or at least how to have a scrollbar change it's size in accordance with a datatable?

Here is the code I have so far

<style>
wrapper1{width:507px; overflow-x: scroll; overflow-y:hidden; 
       height: 20px; float: right}
div1 {width:1000px; height: 20px;}
      </style>
    <script type="text/javascript"> $(function () {

    $("#wrapper1").scroll(function(){
        $(".dataTables_scrollBody")
            .scrollLeft($("#wrapper1").scrollLeft());
    });
    $(".dataTables_scrollBody").scroll(function () {
        $("#wrapper1")
            .scrollLeft($(".dataTables_scrollBody").scrollLeft());
    });
});             
        </script>
    
    <script type="text/javascript" charset="utf-8">
        
        $(document).ready(function () {
            var oTable = $('#tblFuels').dataTable({
                "bSort" : false,
                "bFilter": false,
                "bInfo": false,
                "sScrollY": "100%",
                "sScrollX": "500px",
                //"sScrollXInner": "70%",
                "bScrollCollapse": false,
                "bPaginate": false,
            });

            var o = new FixedColumns(oTable);
        });
    </script>
  }
}
    <div id="wrapper1">
        <div id="div1">
        </div>
    </div>
    <div clear: both></div>

and then I have the code for the actual data table below it