Heim >Web-Frontend >HTML-Tutorial >求教：如何用 angularjs 实现表格首列固定_html/css_WEB-ITnose
求教：如何用 angularjs 实现表格首列固定_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:361672Durchsuche
如题，这该如何解决呢？求各位大神给意见啊
回复讨论(解决方案)
没图帮不了你，说实话你完全可以这样,
第一列是一个表格,其余列是一个表格,这样就可以了
<!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="";};}); 基本效果就是这样,具体你自己调整一下吧.
非常感，我尝试用两个表格显示吧。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Css布局系列-float 浮动_html/css_WEB-ITnoseNächster Artikel：著名奢侈品网站漂亮的英文字体怎么出现的_html/css_WEB-ITnose