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

Question

我有一个角度 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>

现在，我在底部有一个水平滚动，我也想在顶部有它。

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

非常感谢任何帮助。

Answer 1

不幸的是，如果没有 javascript，就无法在顶部和底部同时拥有滚动条。

可以在顶部有一个带有 css 的滚动条，但这仍然只是一个滚动条：

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

唯一的方法是使用 javascript。最简单的实现方法是使用jQuery Doublescroll plugin

下载文件并将其作为 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>