如何为md-table添加上下双横向滚动条并修复顶部滚动条不显示问题

我尝试为md-table同时添加上方和底部横向滚动条，但目前仅能显示底部滚动条，需要实现顶部同步横向滚动的效果。

效果对比 #

• 预期效果：
• 当前实际效果（仅底部有滚动条）：

相关演示 #

• 单表演示：demo
• 多表演示：http://jsfiddle.net/e1w0vmns/1/

现有实现代码 #

目前我使用jQuery实现滚动同步逻辑、自定义directive处理表格宽度监听，代码如下：

JS代码 #

angular.module('components', [])
.directive('master',function () { //declaration
    function link(scope, element, attrs) { 
        scope.$watch(function(){ 
            scope.duelScroll = { 
                width:element[0].offsetWidth+'px' 
            };
        });
    }
    return {
        restrict: 'AE', 
        link: link 
    };
})
angular.module("datatable", ['ngRoute', 'ngMaterial', 'md.data.table']).controller("datacontroller", ['$scope', function($scope) {
   $(function () {
            $("[name='upperScroll']").scroll(function () {
                $("[name='wireTable']").scrollLeft($("[name='upperScroll']").scrollLeft());
            });
            $("[name='wireTable']").scroll(function () {
                $("[name='upperScroll']").scrollLeft($("[name='wireTable']").scrollLeft());
            });
            $("[name='upperScroll']").css({ 'height': ($("[name='wireTable']").height() + 'px') });
        });
        $scope.DataSet = [1];
}]);

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
<div ng-app="datatable" ng-controller="datacontroller">


<form name="Information">
    <md-content layout-padding ng-repeat="Data in DataSet">
        <ng-form name="invoice{{$index}}">
            <md-card style="background-color:Gainsboro">

                <div ng-init="isShowAll =true" ng-show="isShowAll">


                    <md-card>
                        <div name="upperScroll" style="overflow-x:scroll; overflow-y: hidden; max-height:20px; width:100%">
                            <div name="innerScroll" ng-style="duelScroll" style="height:20px;"></div>
                        </div>
                        <div ng-style="getStyle($index)">
                            <md-table-container name="wireTable" infinite-scroll="loadMore($index)" infinite-scroll-distance="1" infinite-scroll-parent="true" ng-init="isShow=true" ng-show="isShow">
                                <table master md-table md-progress="aPromise" name="innerWireTable">
                                    <thead md-head md-order="sortOrder" style="background-color:#e0dcff; ">
                                        <tr md-row style="height:45px">
                                            <th md-column><span>Test1</span></th>
                                            <th md-column><span>Test2</span></th>
                                            <th md-column><span>Test3</span></th>
                                            <th md-column><span>Test4</span></th>
                                            <th md-column><span>Test5</span></th>
                                            <th md-column><span>Test6</span></th>
                                            <th md-column><span>Test7</span></th>
                                            <th md-column><span>Test8</span></th>
                                            <th md-column><span>Test9</span></th>
                                            <th md-column><span>Test10</span></th>
                                            <th md-column><span>Test11</span></th>
                                            <th md-column><span>Test12</span></th>
                                            <th md-column><span>Test13</span></th>
                                            <th md-column><span>Test14</span></th>
                                            <th md-column><span>Test15</span></th>
                                            <th md-column><span>Test16</span></th>
                                            <th md-column><span>Test17</span></th>
                                            <th md-column><span>Test18</span></th>
                                            <th md-column><span>Test19</span></th>
                                            <th md-column><span>Test20</span></th>
                                            
                                        </tr>

                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td md-cell>Test1</td>
                                            <td md-cell>Test2</td>
                                            <td md-cell>Test3</td>
                                            <td md-cell>Test4</td>
                                            <td md-cell>Test5</td>
                                            <td md-cell>Test6</td>
                                            <td md-cell>Test7</td>
                                            <td md-cell>Test8</td>
                                            <td md-cell>Test9</td>
                                            <td md-cell>Test10</td>
                                            <td md-cell>Test11</td>
                                            <td md-cell>Test12</td>
                                            <td md-cell>Test13</td>
                                            <td md-cell>Test14</td>
                                            <td md-cell>Test15</td>
                                            <td md-cell>Test16</td>
                                            <td md-cell>Test17</td>
                                            <td md-cell>Test18</td>
                                            <td md-cell>Test19</td>
                                            <td md-cell>Test20</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </md-table-container>
                        </div>
                    </md-card>
                </div>
            </md-card>
        </ng-form>
    </md-content>
</form> 
</div>

需求说明 #

我已经查阅过滚动条相关问题，希望能基于现有代码修复问题，同时需要支持多表格场景下的滚动适配。

内容的提问来源于stack exchange，提问作者its me