Ng-repeat表td样式未正确加载

Question

在<td>内使用ng-repeat后，我的表格<tr>出现问题。在<tr>内添加ng-repeat后出现问题。我丢失了<td> <td>行样式。看看下面的图片。

现在看起来像下面的屏幕截图。

在表格之前，它看起来像下图。

我用于显示的代码如下：

 <table>
 <tr>
     <th>Ref No</th><th>Referance Date</th><th>Phone Model</th><th>Customer Name</th><th>Customer Phone</th><th>Transfer</th><th>Take Print</th>
 </tr>
  <tbody>
<tr ng-repeat="x in Approve"><td> {{ x.ref_no }} </td><td> {{ x.ref_date }} </td><td> {{ x.model_name }} </td><td> {{ x.c_name }} </td><td> {{ x.c_phone }} </td><td><a href="more.php#?id={{ x.ref_no }}"><button class="button">Transfer</button></td><td><a href="print.php?id={{ x.ref_no }}"><button class="button">Print Log</button></td></tr>
  </tbody>
</table>

控制器代码如下。

$http.get("api/transfer_api.php").then(function (response) {
$scope.Approve = response.data.message;
});

表格样式代码：

            #main-content table {
            width: 100%;
            border-collapse: collapse;
            }

            #main-content table thead th {
            font-weight: bold;
            font-size: 15px;
            border-bottom: 1px solid #ddd;
            }

            #main-content tbody {
            border-bottom: 1px solid #ddd;
            }

            #main-content tbody tr {
            background: #fff;
            }

            #main-content tbody tr.alt-row {
            background: #f3f3f3;
            }

            #main-content table td,
            #main-content table th {
            padding: 10px;
            line-height: 1.3em;
            }        

            #main-content table tfoot td .bulk-actions {
            padding: 15px 0 5px 0;
            } 

            #main-content table tfoot td .bulk-actions select {
            padding: 4px;
            border: 1px solid #ccc;
            }