javascript - 在 AngularJS 指令中使用水平和垂直滚动粘贴表格列和标题

Question

我完全不熟悉 AngularJS、HTML、JS、CSS，甚至是 Web 开发。几天来，我一直在尝试实现一个场景，其中:

我有一个表格，其中的列具有动态宽度。表格标题需要粘贴(或始终在屏幕上)，以及前两列。表格必须能够水平和垂直滚动。

我所做的有几个问题，因为我是新手，所以我被困在这里。我可以实现粘贴标题，或者粘贴前两列，但不能同时实现。它们也没有“连接”在一起。

这是我做的。 CSS 主要来自另一个源。

function StickController($scope) {
    $scope.dataset = {
      	tabledata: [
        {
        col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4 Lorem Lorem Lorem Lorem Lorem Lorem ',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12 Lorem Lorem Lorem Lorem Lorem',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8 Lorem Lorem Lorem Lorem Lorem',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4 Lorem LoremLoremLorem Lorem Lorem LoremLorem ',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        },{
         col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9',
        col10: 'col10',
        col11: 'col11',
        col12: 'col12',
        col13: 'col13'
        }
        ]
    };
}

table {
    display: block;
    overflow-x: auto;
    height: 200px;
    white-space: nowrap;
}

.stick-table {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.stick-table thead th {
    background-color: #DDEFEF;
    padding-right: 3px;
    padding-left: 3px;
    border: none;
    color: #336B6B;
    height: 20px;
    text-align: center;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
    font-size: 12px;
    font-family: "Bookman", Georgia, "Times New Roman", serif;
}
.stick-table tbody td {
    color: #333;
    text-align: center;
    height: 20px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
    font-size: 12px;
    font-family: "Bookman", Georgia, "Times New Roman", serif;
    border: solid 1px #DDEFEF;
}
.stick-wrapper {
    position: relative;
}
.stick-scroller {
    margin-left: 160px;
    overflow-y: visible;
    padding-bottom: 5px;
}
.stick-table .stick-sticky-col {
    border-left: solid 1px #DDEFEF;
    left: 30px;
    position: absolute;
    text-align: center;
    top: auto;
    height: 20px;
    width: 90px;
}
.stick-table .stick-sticky-col-kat {
    border-left: solid 1px #DDEFEF;
    left: 120px;
    position: absolute;
    text-align: center;
    top: auto;
    height: 20px;
    width: 40px;
}
.stick-table .stick-sticky-col-edit {
    border-left: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    height: 20px;
    width: 30px;
}
.stick-scroller-client {
    margin-left: 30px;
    overflow-y: visible;
    padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app ng-controller='StickController'>
<p>
This content should not be scrolled either way.
</p>
<div class="stick-wrapper">
        <div class="stick-scroller">
            <table class="stick-table">
                <thead>
                <tr>
                    <th class="stick-sticky-col">SCol1</th>
                    <th class="stick-sticky-col-kat">SCol2</th>
                    <th>Col3</th>
                    <th>Col4</th>
                    <th>Col5</th>
                    <th>Col6</th>
                    <th>Col7</th>
                    <th>Col8</th>
                    <th>Col9</th>
                    <th>Col10</th>
                    <th>Col11</th>
                    <th>Col12</th>
                    <th>Col13</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="data in dataset.tabledata">
                    <td class="stick-sticky-col">{{ data.col1 }}</td>
                    <!--<td>{{ car.allapot }}</td>-->
                    <td class="stick-sticky-col-kat">{{ data.col2 }}</td>
                    <td>{{ data.col3 }}</td>
                    <td>{{ data.col4}}</td>
                    <td>{{ data.col5 }}</td>
                    <td>{{ data.col6 }}</td>
                    <td>{{ data.col7 }}</td>
                    <td>{{ data.col8 }}</td>
                    <td>{{ data.col9 }}</td>
                    <td>{{ data.col10 }}</td>
                    <td>{{ data.col11 }}</td>
                    <td>{{ data.col12}}</td>
                    <td>{{ data.col13 }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    </div>

我创建了一个 fiddle ，这就是我现在的位置。这是:https://jsfiddle.net/Lt7aP/2590/

我从来没有用过jQuery，我可以只用css解决这个问题吗？请记住，我以前从未做过网络开发，我在这里尽力而为。谢谢!

Answer 1

你好尝试在外部 div 上添加 overflow auto 这是工作 fiddle

Demo