为什么我在表格行中有差距?

时间:2016-07-13 11:58:20

标签: angularjs twitter-bootstrap-3

我在我的angularjs项目上工作。

我使用ng-repeat在表格中创建行。

这是plunker

这是html模板:

<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>

这是控制器:

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;

});

以下是视图中的内容:

enter image description here

你可以在上图中看到我的行之间有差距,我无法弄清楚为什么我会得到这个差距?

1 个答案:

答案 0 :(得分:1)

您需要在第二行中添加一个th,在第二行中添加一个td

同时不要将colspan="2"class="pull-left"一起使用td中的另一个元素并将其拉向左侧