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?

floribon · Accepted Answer · 2015-02-11 03:55:41Z

4

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>

answered Feb 11, 2015 at 3:55

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shaaa Over a year ago

Can you tell me in the above example how to achieve different widths for different cells in table? Any help.

floribon Over a year ago

@shaaa that's not related to Angular anymore but just CSS. You can add width to your cells with either width, padding, margin, etc. For the flex option it's using flex-grow. I encourage you to search online for doc about styling HTML tables and flexboxes.

Collectives™ on Stack Overflow

Convert table to div in angularjs using css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related