Javascript 如何在引导表的顶部和底部有一个滚动条？

我有一个角度MD引导表，我想在表的顶部和底部有一个水平滚动条

代码如下：

<div layout="column" layout-align="center stretch" flex>
                <div layout="row" style="margin: 20px;">
                    <div flex></div>
                </div>
                <md-table-container flex>
                    <table md-progress="vm.searchTablePromise" md-table single>
                        <thead md-sticky
                               style="background-color:#00a9da;"
                               md-head md-order="vm.query.order">
                            <tr md-row>
                                <th style="color: white;" md-column md-order-by="name">
                                     Name
                                </th>
                                <th style="color: white;" md-column md-order-by="id">
                                     ID
                                </th>
                                <th style="color: white;" md-column md-order-by="ein">
                                    EIN
                                </th>
                                <th style="color: white;" md-column md-order-by="phNumber">
                                    Ph. Number
                                </th>
                                
                            </tr>
                        </thead>
                        <tbody md-body>
                            <tr md-row ng-repeat="item in vm.data">
                                <td md-cell>
                                    <div style="min-width: 200px;">{{item.name}}</div>
                                </td>
                                <td md-cell>
                                    {{item.id}}
                                </td>
                                <td md-cell>
                                    <div style="min-width: 80px;">{{item.ein}}</div>
                                </td>
                                <td md-cell>
                                    {{item.phNumber}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </md-table-container>
            </div>

名称
身份证件
艾因
博士数
{{item.name}
{{item.id}
{{item.ein}
{{item.phNumber}

现在，我在底部有一个水平卷轴，我也希望它在顶部

这个链接提供了一个解决方案，但我不想有一个用于滚动的JS相关代码

---

非常感谢您的帮助。

不幸的是，如果没有javascript，在顶部和底部都有滚动条是不可能的

可以使用css在顶部设置一个滚动条，但仍然只有一个滚动条：

md-table-container{
    width: 100%;
    overflow: scroll;
    display: block;
    transform: rotate(180deg) scaleX(-1);
}
table{
    transform: rotate(180deg) scaleX(-1);
}

唯一的方法是使用javascript。实现它最简单的方法是使用

下载该文件并将其作为ds.js包含在html中。以下是一个完整的示例：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="ds.js"></script>
<script>
$(function(){
    $('#the-table').doubleScroll();
});

</script>
<div layout="column" layout-align="center stretch" style="width:100%; overflow:hidden" flex>
    <div layout="row" style="margin: 20px;">
        <div flex></div>
    </div>
    <md-table-container id="the-table" style="width:100%; overflow:scroll; display:block" flex>
        <table  style="width:100%" md-progress="vm.searchTablePromise" md-table single>
            <thead md-sticky
                   style="background-color:#00a9da;"
                   md-head md-order="vm.query.order">
                <tr md-row>
                    <th style="color: white;" md-column md-order-by="name">
                         Name
                    </th>
                    <th style="color: white;" md-column md-order-by="id">
                         ID
                    </th>
                    <th style="color: white;" md-column md-order-by="ein">
                        EIN
                    </th>
                    <th style="color: white;" md-column md-order-by="phNumber">
                        Ph. Number
                    </th>
                    
                </tr>
            </thead>
            <tbody md-body>
                <tr md-row ng-repeat="item in vm.data">
                    <td md-cell>
                        <div style="min-width: 200px;">{{item.name}}</div>
                    </td>
                    <td md-cell>
                        {{item.id}}
                    </td>
                    <td md-cell>
                        <div style="min-width: 80px;">{{item.ein}}</div>
                    </td>
                    <td md-cell>
                        {{item.phNumber}}
                    </td>
                </tr>
            </tbody>
        </table>
    </md-table-container>
</div>

$（函数（）{
$（“#表”）.doubleScroll（）；
});
名称
身份证件
艾因
博士数
{{item.name}
{{item.id}
{{item.ein}
{{item.phNumber}