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>

我创造了一个小提琴，这就是我现在的位置。这是：https://jsfiddle.net/Lt7aP/2590/

我从未使用过jQuery，我能用css解决这个问题吗？请记住，我之前从未做过网络开发，我在这里尽我所能。谢谢！

Answer 1

HI尝试在外部div上添加overflow auto这里是工作小提琴

Demo

Answer 2

如果您没有使用jQuery / Angular的经验，请尝试使用任何表插件，例如https://www.datatables.net/或https://www.dynatable.com。

只是不要编写自己的代码，而是尝试使用其中一个相关示例 - https://www.datatables.net/examples/index。这可以更快地解决你的问题，然后深入研究Angular / jQuery编码。

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

2 个答案: