how display grids using table - html

Question

Am using grid to diplay data from my data base. I would display grids in a table of 3 columns inthis way :
I try this code
<table style="width:70%" ng-repeat="e in events" >
<tr>
<td>
<div class="col-md-3 ticket-grid" >
<div class="tickets">
<div class="grid-right">
<font color="red"><h3>{{e.name}}</h3></font>
Location: {{e.loc}}<br>
Category: Sport <br>
Start date: <br>
End date:
Description: <span>{{e.description}}</span> <br>
Contact: {{e.contact}}<br>
Confirm
Refuse
</div>
<div class="clearfix"> </div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
PS: events is an array that contains my data.
But i get this result
Any help please

Answer 1

You need to add the ng-repeat to the element you want repeated. In your version you are creating new <table> with all contents for each record in events. Moving it to the <td> will leave you with same issue as it will just create a new row for each record.
If you are using bootstrap - you should just use the grid system instead of the <table> for layouts, something like.
<div ng-repeat="e in events">
<div class="col-md-4 ticket-grid" >
<div class="tickets">
<div class="grid-right">
<font color="red"><h3>{{e.name}}</h3></font>
Location: {{e.loc}}<br>
Category: Sport <br>
Start date: <br>
End date:
Description: <span>{{e.description}}</span> <br>
Contact: {{e.contact}}<br>
Confirm
Refuse
</div>
<div class="clearfix"> </div>
</div>
</div>
You will need something like, to break out of the ng-repeat loop every 3 records:
<div class="clearfix" ng-if="$index % 3 == 0"></div>
See Plunker examples for more of an idea here