Question

我有一个包含动态行的表。当我添加新行时出现删除按钮。我使用table-layout，当出现删除按钮时，此按钮大小变得像另一个td尺寸。我尝试添加表格宽度和这个“删除按钮”宽度（table table-layout:fixed; width:100%），但它不起作用，然后我尝试将宽度设置为按钮（width:5%）并再次无效。 table-layout这么舒服，我不想删除这个属性，但我有问题，我错了？ Here is my Plnkr example..

UPD。我有table-layout表和动态行，在第一个屏幕显示默认视图当我添加新行时，我添加“删除按钮”。此按钮应该很小，但因为table-layout'删除按钮'与另一行的宽度相同：

Answer 1

如果问题是关于包含删除按钮的最后一列的样式，我建议您添加css：

table, tr, td:nth-child(-1) {
     width: auto;
     border:none;
     margin: 1px;
}

更新后的plunker

Answer 2

尝试以下代码

var app = angular.module('App', []);

app.controller('Ctrl', function($scope) {
  $scope.item = [
       {
         field : [
            {
              name : 'Bird',
              id : 'littleBird',
              value : 'Dove'
            },
            {
              name : 'Dog',
              id : 'bigGreyDog',
              value : 'Lucky'
            },
            {
              name : 'Cat',
              id : 'tinyKitty',
              value : 'Fluffy'
            },
            {
              name : 'Bug',
              id : 'uglyBug',
              value : 'Buggy'
            }
           ]
       }
      ]
      
  $scope.addRow = function() {
    var copy = angular.copy($scope.item[0]);
    $scope.item.push(copy)
  }
  
  $scope.removeRow = function(index) {
    $scope.item.splice(index, 1)
  }
})

.delete{width: 100%;}
.deleteparent{border:none;}
table{border:none;}
table thead th{border:1px solid #ccc;border-collapse:collapse !important;}

<!DOCTYPE html>
<html ng-app='App'>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='Ctrl'>
    <h1>table</h1>
    <table>
      <thead>
        <tr>
          <th ng-repeat='item in item[0].field'>{{item.name}}</th>
        </tr>
      </thead>
      
      <tbody ng-form='tableForm'>
        <tr ng-repeat='row in item'>
          <td ng-repeat='field in row.field'>
            <input type="text"
                   ng-model='field.value' 
                   name='{{field.id}}'
                   required
                   ng-class='{"is-invalid": tableForm[field.id].$invalid}'>
          </td>
          <td ng-if='$index !== 0' class="deleteparent"
              ><button style='color:red;cursor:pointer'
              ng-click='removeRow($index)' class="delete">X</button></td>
        </tr>
      </tbody>
    </table>
    <button ng-click='addRow()'>add row</button>
  </body>

</html>

如何从table-layout中排除最后一个td

2 个答案: