Top Scroll Bar Hack

<div id="topScroller" style="height: 20px; overflow-x: scroll;display:none">
    <div id="gridTableMirror" style="height: 20px;"></div>
</div>

{% javascript %}
    $().ready(function () {
        // Set the width of the extra scroll bar we added and show the extra scroll bar if a bottom scroll bar exists

        var tableResponsiveWidth = $(".table-responsive").width();
        var gridTableWidth  = $(".grid-table").width();

        // if these widths are the same then no scroll bar is necessary
        if (tableResponsiveWidth != gridTableWidth) {
            $("#topScroller").width(tableResponsiveWidth);
            $("#gridTableMirror").width(gridTableWidth);
            $("#topScroller").show();
        }

    });

    // Per https://jsfiddle.net/TBnqw/1/
    // tie our custom scroll bar at the top to the bottom scroll bar
    $(function () {
        $("#topScroller").scroll(function () {
            $(".table-responsive").scrollLeft($("#topScroller").scrollLeft());
        });
        $(".table-responsive").scroll(function () {
            $("#topScroller").scrollLeft($(".table-responsive").scrollLeft());
        });
    });
{% endjavascript %}