Issue setting up grid style results - html

Question

I want to show a table in a grid result table and I am failing...
I want it to look like so:
I'm trying to do it this way, but it only shows one line:
<div class="resultsTable">
<table style="display: inline-table">
<tr ng-repeat="result in results" class="resultsBox">
<td>
<img src="{{result.imageUrl}}" width="200px">
<h4>{{result.name}}</h4>
</td>
</tr>
</table>
</div>
CSS:
.resultsBox{
background-color: #ffffff;
height: 200px;
width: 200px;
padding-left: 10px;
padding-top: 20px;
}
.resultsBox>img{
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
.resultsTable{
max-height: 500px;
overflow: scroll;
display: inline-table;
height: 500px;
}

Answer 1

From the template you have shared it's normal that you see only one column of n row. It is not link to the css but to the markup that will be generated.
Your results property is an array of one dimension something like [{obj1}, {obj2}, {obj3}] but you want to display a matrix an array of two dimensions i.e [[{obj1}, {obj2}], [{obj3}, {obj4}]]. Unfortunately it is not that easy in AngularJS to generate a matrix based on a one dimension array. That's why I will recommend that you change the structure of your result to match its matrix display. Then change your template to something like :
<div class="resultsTable">
<table style="display: inline-table">
<tr ng-repeat="row in results"> //loop over all row of 2 elements
<td ng-repeat="cell in row" class="resultsBox"> //loop over elements
<img src="{{cell.imageUrl}}" width="200px">
<h4>{{cell.name}}</h4>
</td>
</tr>
</table>
</div>
See a working plunker here