Michael Michael - 4 months ago 9
AngularJS Question

Why I get gap in table rows?

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:

enter image description here

You can see in picture above I have gap between the rows and I cant figure out why I get this gap?

Answer

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

Comments