固定/冻结可滚动div内的标题和列

时间:2016-08-18 17:28:24

标签: html angularjs fixed-header-tables

这个问题可能重复但我没有得到解决方案。 我需要一个帮助来固定/冻结标题和几个第一列内表 可滚动的div元素。数据是动态的,因为i列和行可能增加或减少取决于数据源。目前它有~86行和~55列。列宽度基于数据是动态的。

我的HTML代码如下所示。

<html>
<body ng-app="myapp" ng-controller="mycontroller">
    <table style="width:100%; height:90%">
        <tr>
            <td width=3%> </td>
            <td>
                <table style="width:100%;">
                    <tr>
                        <td>Page header</td>
                    </tr>
                    <tr><td></td></tr>
                </table>

                <table style="width:100%; height:90%">
                    <tr>
                        <td>
                            <div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
                                <table>
                                    <thead ng-repeat="h in dummy| limitTo:1">
                                        <tr>
                                            <th ng-repeat="(key, val) in h">
                                                {{key}}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="h in dummy">
                                            <td ng-repeat="(key, val) in h">{{val}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

0 个答案:

没有答案