1、html代码如下：
<div class="clscroll corner-header">
<table>
<tr>
<th></th>
</tr>
</table>
</div>
<div class="clscroll column-headers" id="clscroll-column-headers">
<table>
<tr>
<th>Bus</th>
<th>Plane</th>
<th>Boat</th>
<th>Bicycle</th>
</tr>
</table>
</div>
<div class="clscroll row-headers" id="clscroll-row-headers">
<table>
<tr>
<th>Red</th>
</tr>
<tr>
<th>Green</th>
</tr>
<tr>
<th>Blue</th>
</tr>
<tr>
<th>Orange</th>
</tr>
<tr>
<th>Purple</th>
</tr>
<tr>
<th>Yellow</th>
</tr>
<tr>
<th>Pink</th>
</tr>
<tr>
<th>Brown</th>
</tr>
</table>
</div>
<div class="clscroll table-content" id="clscroll-content">
<table>
<tr>
<td>Red Bus</td>
<td>Red Plane</td>
<td>Red Boat</td>
<td>Red Bicycle</td>
</tr>
<tr>
<td>Green Bus</td>
<td>Green Plane</td>
<td>Green Boat</td>
<td>Green Bicycle</td>
</tr>
<tr>
<td>Blue Bus</td>
<td>Blue Plane</td>
<td>Blue Boat</td>
<td>Blue Bicycle</td>
</tr>
<tr>
<td>Orange Bus</td>
<td>Orange Plane</td>
<td>Orange Boat</td>
<td>Orange Bicycle</td>
</tr>
<tr>
<td>Purple Bus</td>
<td>Purple Plane</td>
<td>Purple Boat</td>
<td>Purple Bicycle</td>
</tr>
<tr>
<td>Yellow Bus</td>
<td>Yellow Plane</td>
<td>Yellow Boat</td>
<td>Yellow Bicycle</td>
</tr>
<tr>
<td>Pink Bus</td>
<td>Pink Plane</td>
<td>Pink Boat</td>
<td>Pink Bicycle</td>
</tr>
<tr>
<td>Brown Bus</td>
<td>Brown Plane</td>
<td>Brown Boat</td>
<td>Brown Bicycle</td>
</tr>
</table>
</div>
2、css代码如下：
.clscroll table {
table-layout: fixed
}
.clscroll td, .clscroll th {
overflow: hidden
}
.corner-header {
float: left
}
.column-headers {
float: left
overflow: scroll
}
.row-headers {
clear: both
float: left
overflow: scroll
}
.table-content {
table-layout: fixed
float: left
overflow: scroll
}
.clscroll td, .clscroll th {
width: 200px
border: 1px solid black
}
.row-headers, .table-content {
height: 100px
}
.column-headers, .table-content, .table-content table, .column-headers table {
width: 400px
}
3、js代码如下：
$("#clscroll-content").scroll(function() {//锁定行
$("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop())
$("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft())
})
$("#clscroll-column-headers").scroll(function() {
$("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft())
})
$("#clscroll-row-headers").scroll(function() {
$("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop())
})
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
table, th , td {
border: 1px solid grey
border-collapse: collapse
padding: 5px
}
table tr:nth-child(odd) {
background-color: #f1f1f1
}
table tr:nth-child(even) {
background-color: #ffffff
}
</style>
</head>
<body>
我的笔记
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">
<table>
<tr ng-repeat="two in twonames">
<td style="position: fixedbackground-color: #ccc height: 47px">{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
<td>{{two.Name}}</td>
<td>{{ two.Country }}</td>
</tr>
</table>
</div>
</body>
<script src="angular.min.js" type="text/javascript"></script>
<script src="myTodoApp.js"></script>
<script src="myTodoCtrl.js"></script>
</html>
myTodoApp.js:
JavaScript code
?
1
var app = angular.module("myTodoApp",[])
myTodoCtrl.js:
app.controller("myTodoCtrl",function($scope){
$scope.message=""
$scope.firstnames=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},{"Name" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"}]
$scope.twonames=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},{"Name" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"},{"Name" : "Island Trading","City" : "Cowes","Country" : "UK"},{"Name" : "Königlich Essen","City" : "Brandenburg","Country" : "Germany"},{"Name" : "Laughing Bacchus Wine Cellars","City" : "Vancouver","Country" : "Canada"},{"Name" : "Magazzini Alimentari Riuniti","City" : "Bergamo","Country" : "Italy"},{"Name" : "North/South","City" : "London","Country" : "UK"},{"Name" : "Paris spécialités","City" : "Paris","Country" : "France"},{"Name" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},{"Name" : "Simons bistro","City" : "København","Country" : "Denmark"},{"Name" : "The Big Cheese","City" : "Portland","Country" : "USA"},{"Name" : "Vaffeljernet","City" : "Århus","Country" : "Denmark"},{"Name" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}]
$scope.left=function(){ return 100- $scope.message.length}
$scope.clear=function(){$scope.message=""}
$scope.save = function(){$scope.message=""}
})
基本效果就是这样
