Convert table to div in angularjs using css

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):

1. use display: table, table-row, table-cell for your div to behave like an actual <table>

2. 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>