Why I get gap in table rows? - angularjs

Question

I work on my angularjs project.
I use ng-repeat to create rows in table.
Here is plunker.
Here is html template:
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in arr1 track by object.id">
<td class="pull-left" ng-bind="object.name"></td>
<td ng-class="{'wrapper':showReview != $index }">
<div ng-class="{'slide':showReview != $index}">
<a class=" btn btn-default btn-xs" ng-click="showReview = showReview == $index ? -1 : $index;"><i class="glyphicon glyphicon-camera"></i></a>
<a class=" btn btn-default btn-xs" ng-click="showInspections = !showInspections; showReview = showReview == $index ? -1 : $index;"><i class=" glyphicon glyphicon-list-alt"></i></a>
</div>
</td>
</tr>
<tr ng-repeat-end ng-if="showInspections && showReview == $index">
<td colspan="">
{{t}}-{{$index}}
</td>
</tr>
</tbody>
</table>
Here is controller:
app.controller('MainCtrl', function($scope) {
$scope.arr1 = [{id:'124',name:'qqq'},
{id:'589',name:'www'},
{id:'45',name:'eee'},
{id:'567',name:'rrr'}];
$scope.t=100;
});
Here how it looks in the view:
You can see in picture above I have gap between the rows and I cant figure out why I get this gap?

Answer 1

You have one th in head and one td in second row you need to add colspan="2" on both of them.
Also do not use class="pull-left" with td take another element inside td and make it pull-left