List Report View Top Horizontal Scroll

<div class="TableScroller" style="height: 20px; overflow-x: scroll; display: none;">
    <div class="TableSize" style="height: 20px;"></div>
</div>

<script>
    $().ready(function () {
        //The code in this .ready function will dynamically set the widths of the divs above creating
        // an additional scroll bar at the top of the data grid when there is a scroll bar at the bottom

        // Mutation example per https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div
        // select the target node
        var target = document.querySelector(".RadGrid_Silk");
        // create an observer instance
        var observer = new MutationObserver(function (mutations) {
            //console.log('Mutation Observed');

            var parentWidth = $(".table-responsive").width();
            var childWidth = $(".RadGrid_Silk").width();

            // if these widths are the same then no scroll bar is necessary
            if (parentWidth != childWidth) {
                $(".TableScroller").width(parentWidth);
                $(".TableSize").width(childWidth);
                $(".TableScroller").show();
            }
        });
        // configuration of the observer:
        var config = { attributes: true, childList: true, characterData: true };
        // pass in the target node, as well as the observer options
        observer.observe(target, config);
    });

    // Per https://jsfiddle.net/TBnqw/1/
    // tie our custom scroll bar at the top to the bottom scroll bar
    $(function () {
        $(".TableScroller").scroll(function () {
            $(".table-responsive").scrollLeft($(".TableScroller").scrollLeft());
        });
        $(".table-responsive").scroll(function () {
            $(".TableScroller").scrollLeft($(".table-responsive").scrollLeft());
        });
    });
</script>