求教：如何用 angularjs 实现表格首列固定_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:49:361672浏览
如题，这该如何解决呢？求各位大神给意见啊
回复讨论(解决方案)
没图帮不了你，说实话你完全可以这样,
第一列是一个表格,其余列是一个表格,这样就可以了
<!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: fixed;background-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:
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="";};}); 基本效果就是这样,具体你自己调整一下吧.
<!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: fixed;background-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:
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="";};}); 基本效果就是这样,具体你自己调整一下吧.
非常感，我尝试用两个表格显示吧。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn