如何排除表格佈局中的最後一個td

我有一個包含動態行的表格。當我添加新行出現刪除按鈕。我使用table-layout，當刪除按鈕出現時，這個按鈕的大小變成另一個td大小。我嘗試添加表格寬度和這個'刪除按鈕'寬度（table table-layout:fixed; width:100%），但它不起作用，然後我嘗試將寬度設置爲按鈕（width:5%），並且再次不起作用。 table-layout這麼舒服，我不想移除這個屬性，但我有問題，我錯了？ Here is my Plnkr example..如何排除表格佈局中的最後一個td

UPD。我有表格table-layout和動態行，在第一個屏幕顯示默認視圖當我添加新行時，我添加「刪除按鈕」。該按鈕要小，但由於table-layout「刪除按鈕」相同的寬度與另一行：

來源

2016-09-16 YoroDiallo

你的問題不是很清楚，而且Plunkr不在這裏加載，所以我不確定問題是什麼。你能否重新解釋這個問題，並添加一個stacksnippet？ –

這是奇怪的結果我檢查plnkr和它的工作..無論如何我更新我的問題:) – YoroDiallo

哦，我使用NoScript，顯然它與Plunkr，甚至當我禁用它發生衝突。好。那麼，這就是表格佈局：固定工作：第一行決定表格單元的寬度。如果你想讓最後一列的寬度爲30px，可以給thead添加一個額外的值。然後桌子會知道有5列，你可以設計最後一個。參見[更新的Plunkr]（https://plnkr.co/edit/Y3owOO5oFKtSzOFG5HO3?p=preview）。 –

如果問題是關於包含刪除按鈕的最後一列的風格，我建議你在你的CSS添加：

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

更新plunker

來源

2016-09-16 17:43:19 gaetanoM

thx！但列也加載動態，所以我不能說有多少列。我想我可以將'td：nth-child（5）'更改爲'td：last-child'，但它會壓扁第一行... – YoroDiallo

@YoroDiallo如果您不知道每行有多少個單元格，您可以使用nth-child（-1）：最後一個。答案已更新。非常感謝你 – gaetanoM

下面的代碼

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="[email protected]" 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>

嘗試

來源

2016-09-16 18:07:57 Dhaarani

這就是我的想法。而不是在表格中添加另一個可見列，使其看起來好像刪除列實際上不是表格的一部分，也不影響表格的寬度。 – Zack

可以分享您的預期設計截圖或圖像 – Dhaarani

如何排除表格佈局中的最後一個td

回答

相關問題