検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >アドバイスを求める: angularjs を使用して table_html/css_WEB-ITnose の最初の列を修正する方法

アドバイスを求める: angularjs を使用して table_html/css_WEB-ITnose の最初の列を修正する方法

WBOY
WBOYオリジナル
2016-06-24 11:49:361667ブラウズ

質問のとおり、これを解決するにはどうすればよいですか?ご意見をお聞かせください


ディスカッション (解決策) への返信

正直に言うと、これはできます、

最初の列は表で、残りは表です。列はテーブルなのでそれだけです 

<!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&ouml;p","City" : "Lule&aring;","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "M&eacute;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&iacute;a del gastr&oacute;nomo","City" : "Barcelona","Country" : "Spain"}];	$scope.twonames=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbk&ouml;p","City" : "Lule&aring;","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "M&eacute;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&iacute;a del gastr&oacute;nomo","City" : "Barcelona","Country" : "Spain"},{"Name" : "Island Trading","City" : "Cowes","Country" : "UK"},{"Name" : "K&ouml;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&eacute;cialit&eacute;s","City" : "Paris","Country" : "France"},{"Name" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},{"Name" : "Simons bistro","City" : "K&oslash;benhavn","Country" : "Denmark"},{"Name" : "The Big Cheese","City" : "Portland","Country" : "USA"},{"Name" : "Vaffeljernet","City" : "&Aring;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&ouml;p","City" : "Lule&aring;","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "M&eacute;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&iacute;a del gastr&oacute;nomo","City" : "Barcelona","Country" : "Spain"}];	$scope.twonames=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbk&ouml;p","City" : "Lule&aring;","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "M&eacute;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&iacute;a del gastr&oacute;nomo","City" : "Barcelona","Country" : "Spain"},{"Name" : "Island Trading","City" : "Cowes","Country" : "UK"},{"Name" : "K&ouml;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&eacute;cialit&eacute;s","City" : "Paris","Country" : "France"},{"Name" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},{"Name" : "Simons bistro","City" : "K&oslash;benhavn","Country" : "Denmark"},{"Name" : "The Big Cheese","City" : "Portland","Country" : "USA"},{"Name" : "Vaffeljernet","City" : "&Aring;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="";};});


基本的な効果は次のとおりです。自分で調整できます



非常に興味深いので、2 つのテーブルを使用して表示してみます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS レイアウト シリーズ-float float_html/css_WEB-ITnose次の記事：CSS レイアウト シリーズ-float float_html/css_WEB-ITnose

関連記事

続きを見る