Home >Web Front-end >HTML Tutorial >Ask for advice: How to use angularjs to fix the first column of the table_html/css_WEB-ITnose
Ask for advice: How to use angularjs to fix the first column of the table_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:361672browse
As mentioned, how to solve this problem? Please give me your opinions
Reply to the discussion (solution)
I can’t help you without a picture. To be honest, you can do this,
The first column is a table and the remaining columns are a table, so that’s it
<!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="";};}); The basic effect is like this, you can adjust it yourself.
<!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="";};}); The basic effect is like this, you can adjust it yourself.
Very Okay, let me try to display it in two tables.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Css layout series-float float_html/css_WEB-ITnoseNext article：Css layout series-float float_html/css_WEB-ITnose