轉換表中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>