转换表中angularjs div的使用CSS

Question

在我看来，形式我有台这样的代码：

<table class ="table table-bordered"> 
<colgroup span="7"></colgroup> 
<tbody> 
    <tr ng-repeat="tr in rows"> 
    <td ng-repeat="td in tr track by $index"> 
     <span ng-bind-html="td"></span> 
    </td> 
    </tr> 
</tbody> 

现在我想从表更改为按股利和下面是我的代码：

<div ng-repeat = "tr in rows"> 
    <div ng-repeat="td in tr track by $index"> 
    <div><span ng-bind-html="td"></span></div> 
    </div> 
</div> 

但它不工作，我尝试添加一些CSS是这样的：

<style type="text/css"> 
    div.inline { float:left; } 
    .clearBoth { clear:both; } 
</style> 

它根本不起作用。 。有什么建议么？

Answer 1

确实<div>标签本身不会做任何事情，你需要CSS。

这里有两种不同的方式来实现这一目标（见下面的代码）：

1. 使用显示：表，表行，表芯为你的DIV的行为像一个实际的<table>

2. 使用显示：弯曲使用Flexboxes由CSS3（不支持旧版本的浏览器兼容）

活生生的例子介绍优点：

angular.module('test', []).controller('ctrl', function($scope) { 
 
    $scope.rows = [['0.0','0.1','0.2'], ['1.0','1.1','1.2']]; 
 
});

.cell { padding: 10px; border: 1px solid #999; } 
 

 
.table  { display: table } 
 
.table .row { display: table-row; } 
 
.table .cell { display: table-cell; } 
 

 
.flexbox  { display: flex; flex-direction: column; } 
 
.flexbox .row { display: flex; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <div ng-app="test" ng-controller="ctrl"> 
 
    
 
    Example using table CSS 
 

 
    <div class="table"> 
 
     <div class="row" ng-repeat="tr in rows"> 
 
     <div class="cell" ng-repeat="td in tr track by $index"> 
 
      {{td}} 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <br><br> 
 

 
    Example using flexbox 
 

 
    <div class="flexbox"> 
 
     <div class="row" ng-repeat="tr in rows"> 
 
     <div class="cell" ng-repeat="td in tr track by $index"> 
 
      {{td}} 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    </div>