使用ng-show显示或隐藏表时，表格会调整大小

Question

我在我的页面中使用了数据表，我想显示一个小图像而不是空白表，所以我使用ng-show来隐藏表格并显示图像。最初我隐藏了表格和图像，并根据条件我显示图像或表格。它工作正常，但当它显示表时，表格将调整大小，如图所示

这是我的HTML代码：

<div ng-show="noRecord" style="color:skyblue;text-align:center">
                <span style="font-size:100px"><em class="fa fa-check-circle"></em></span><br />
                <span style="font-size:14px">All Done...Nice !</span>
            </div>
    <div class="conv-list-table" ng-show="!noRecord">
                    <table id="example" class="table table-hover table-bordered table-striped conversation-table" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th check-all="check-all" id="selectHeader">

                                    <label data-toggle="tooltip" data-title="Check All" class="checkbox c-checkbox">
                                        <input type="checkbox" style="margin-right:-2px" ng-click="selectAll($event)" id="selectall">
                                        <span class="fa fa-check conv-header-checkbox" ng-click="isSelectedAll()"></span>
                                    </label>

                                </th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody style="cursor: pointer"></tbody>

                    </table>
                </div>

这是js代码：

$scope.noRecord = false;
    var rowsData = $('#example').DataTable().rows().data();
                        $scope.count = rowsData.length;
                        if ($scope.count == 0) {                        
                            $scope.noRecord = true;                        
                        }

使用ng-show之前

使用ng-show后