Convert table to div in angularjs using css - html

Question

In my view form I have this code for table:
<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>
Now I want to change from table to div and below is my code:
<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>
But it's not work I try to add some css like this:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
It doesn't work at all. . Any suggestions?

Answer 1

Indeed <div> tags alone won't do anything and you need CSS.
Here are two different ways to achieve this (see code below):
use display: table, table-row, table-cell for your div to behave like an actual <table>
use display: flex to use the advantages of Flexboxes introduced by CSS3 (not compatible with older browsers)
Live example:
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>