2016-11-10 12 views
0

角度材料設計のレイアウトを整列させる方法はありますかのような行と列は、テーブルのようになりますか?角度材料設計を使用したテーブル状のレイアウト

明確にするために、私が望むのは、以下の表のセルを整列させることです。

もちろん、flex="xxx"を追加することもできますが、問題は列の幅を修正したくないということです。

私はcss/flexboxソリューションにも興味があります。

<html lang="en" > 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
</head> 
 
<body ng-app="BlankApp" ng-cloak> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    <script type="text/javascript">  
 
    angular.module('BlankApp', ['ngMaterial']); 
 
    </script> 
 

 
    <style> 
 
    .myCell { 
 
     border: solid black 1px; 
 
     padding: 10px; 
 
    } 
 
    </style> 
 
    <div layout="column"> 
 
    <div layout="row"> 
 
     <div class="myCell">ROW 1, CELL 1</div> 
 
     <div class="myCell">ROW 1, CELL 2</div> 
 
     <div class="myCell">ROW 1, CELL 3</div> 
 
    </div> 
 
    <div layout="row"> 
 
     <div class="myCell">A LONGER CELL</div> 
 
     <div class="myCell">ROW 2, CELL 2</div> 
 
     <div class="myCell">ROW 2, CELL 3</div> 
 
    </div> </div> 
 
</body> 
 
</html>

+0

汗誰かがすでに1を作成した理由。フォークして再生してから使用することができます。 'https:// github.com/daniel-nagy/md-data-table' – joyBlanks

答えて

1

これはあなたが意味するもののようなものですか? - CodePen

マークアップ

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column"> 
    <div layout="column" flex> 
    <div layout="row" flex> 
     <div class="myCell" flex>ROW 1, CELL 1</div> 
     <div class="myCell" flex>ROW 1, CELL 2</div> 
     <div class="myCell" flex>ROW 1, CELL 3</div> 
    </div> 
    <div layout="row" flex> 
     <div class="myCell" flex>A LONGER CELL</div> 
     <div class="myCell" flex>ROW 2, CELL 2</div> 
     <div class="myCell" flex>ROW 2, CELL 3</div> 
    </div> 
    </div> 
</div> 
+0

' flex = "xxx" 'と同じです。特に、列サイズが最大のセルに適合するレイアウトを作成することはできません。 – yannick1976

+0

@ yannick1976これはあなたが望むものですか? https://codepen.io/camden-kid/pen/zorXKW?editors=1010#0 –

+0

セルの1つが* row *内の他のセルよりも大きな*高さ*を持つ場合、これは機能しません。 – yannick1976

関連する問題