【发布时间】：2016-11-10 17:44:13
【问题描述】：
有什么方法可以让 Angular Material Design 布局同时行和列对齐，就像表格一样？
为了清楚起见，我想要对齐下表中的单元格。
当然我可以添加一些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>【问题讨论】：
-
既然有人已经创建了一个，为什么还要出汗呢。您可以分叉并玩，然后使用它。
https://github.com/daniel-nagy/md-data-table
标签： css flexbox angular-material