テーブルレイアウトから最後のtdを除外する方法

私は動的な行を持つテーブルを持っています。新しい行を追加すると削除ボタンが表示されます。 table-layoutを使用し、削除ボタンが表示された場合、このボタンサイズは他のサイズと同じになります。私はテーブルの幅とこの '削除ボタン'の幅（table table-layout:fixed; width:100%）を追加しようとしましたが、うまくいきませんでした。そして、ボタン（width:5%）の幅を設定しようとしました。 table-layoutとても快適で、このプロパティを削除したくないのですが、問題があります。どこが間違っていますか？ Here is my Plnkr example..テーブルレイアウトから最後のtdを除外する方法

UPD。私はtable-layoutと動的な行のテーブルを持っています。最初の画面にはデフォルトのビューが表示されます新しい行を追加すると「削除ボタン」が追加されます。このボタンは小さくなりますがtable-layoutので、別の行と同じ幅「ボタンを削除」する必要がありますあなたのCSSに追加する質問は削除ボタンを含む最後の列のスタイルについてである場合

出典

2016-09-16 YoroDiallo

あなたの質問はあまり明確ではなく、Plunkrはここにロードされないので、問題の原因がわかりません。あなたは少し質問を言い直して、スタックニットを追加できますか？ –

それは私がplnkrをチェックしてうまくいくのですが、とにかく私の質問を更新します:) – YoroDiallo

ああ、私はNoScriptを使用していて、明らかにPlunkrと衝突しました。 OK。さて、テーブルレイアウト：固定の動作：最初の行はテーブルセルの幅を決定します。最後の列を30ピクセル幅にしたい場合は、余分なthadをtheadに追加します。その後、テーブルには5つの列があり、最後の列をスタイルすることができます。 [更新されたPlunkr]（https://plnkr.co/edit/Y3owOO5oFKtSzOFG5HO3?p=preview）を参照してください。 –

、私はあなたを提案してもよいです：

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'に変更することができますが、第1行を押しつぶすと思います... – 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を除外する方法

答えて

関連する問題