0
AngularJS、HTML、JS、CSS、さらにはWeb開発の新機能です。数日の間、私はシナリオを実装しようとしていました。AngularJS指示文の水平および垂直スクロール付きの貼り付けテーブルの列とヘッダー
私はテーブルに列が動的な幅を持っています。最初の2つの列だけでなく、テーブルのヘッダーを貼り付ける（または常に画面に表示する）必要があります。テーブルは水平方向と垂直方向にスクロールできる必要があります。
私がやったことにはいくつかの問題があります。私はこれを初めて知っているので、私はここにこだわっています。私は貼り付けられたヘッダーを実装することができます。または貼り付けられた最初の2つの列は実装できますが、両方は実装できません。彼らはまた、一緒に配線されていません。
ここに私がしたことがあります。 CSSは主に別のスカーフのものです。
function StickController($scope) {
$scope.dataset = {
\t 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でのみ解決できますか？ 私は以前にウェブ開発をしていないことを覚えておいてください。私はここで最善を尽くしました。ありがとうございました！あなたはjQueryの/角度は、テーブルのプラグインのいずれかを使用して例えばhttps://www.datatables.net/またはhttps://www.dynatable.comを試してみてくださいとの経験がない場合は