Michael Michael - 3 months ago 8
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">
<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>

<tr ng-repeat-end ng-if="showInspections && showReview == $index">
<td colspan="">

Here is controller:

app.controller('MainCtrl', function($scope) {

$scope.arr1 = [{id:'124',name:'qqq'},



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?


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