自動調整最後一列

我需要將最後一列自動調整大小，也就是說，不要超過包含元素的最大大小。自動調整最後一列

我的代碼（codepen here）顯示的行爲：

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.products = [ 
 
    { name: "Milk", ok: true }, 
 
    { name: "Bread", ok: true }, 
 
    { name: "Cheese", ok: false } 
 
    ]; 
 
}); 
 

 
app.directive("toggle", function() { 
 
    return { 
 
     restrict: 'E', 
 
     require: 'ngModel', 
 
     scope: { ngModel: "=",on:"@", off:"@" }, 
 
     template: "<label><input type='checkbox' ng-model='ngModel'>{{ngModel?on:off}}</label>" 
 
    }; 
 
});

table { width: 100%; border-collapse: collapse; } 
 
td {border: 1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-app="myApp" ng-controller="myCtrl"> 
 
    <tr ng-repeat="p in products"> 
 
    <td>{{p.name}}</td> 
 
    <td>{{p.name}}</td> 
 
    <td><toggle ng-model="p.ok" on="OK" off="KO"/></td> 
 
    </tr> 
 
</table>

來源

2017-09-12 Serge

所有你需要做的就是最後td和inline-something在我下面的例子我做了它inline-table

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.products = [ 
 
    { name: "Milk", ok: true }, 
 
    { name: "Bread", ok: true }, 
 
    { name: "Cheese", ok: false } 
 
    ]; 
 
}); 
 

 
app.directive("toggle", function() { 
 
    return { 
 
     restrict: 'E', 
 
     require: 'ngModel', 
 
     scope: { ngModel: "=",on:"@", off:"@" }, 
 
     template: "<label title={{ngModel?on:off}}><input type='checkbox' ng-model='ngModel'><span class='slider round'></span>{{ngModel?on:off}}</label>" 
 
    }; 
 
});

table { width: 100%; border-collapse: collapse; } 
 
td {border: 1px solid black;} 
 
td:last-of-type{display: inline-table;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-app="myApp" ng-controller="myCtrl"> 
 
    <tr ng-repeat="p in products"> 
 
    <td>{{p.name}}</td> 
 
    <td>{{p.name}}</td> 
 
    <td><toggle ng-model="p.ok" on="OK" off="KO"/></td> 
 
    </tr> 
 
</table>

來源

2017-09-12 15:38:30 Deckerz

都很好，但問題是'TR {背景：紅色;}'，我的意思是，其他列沒有相應地恢復... – Serge

@Sergeyou希望所有列都被自動調整大小？如果是這樣，只是刪除'：last-of-type' – Deckerz

也是，問題是與'on =「OKOKOK」off =「KO」'...最後一列被打破 – Serge

這就是你要找的我認爲。神奇的發生與CSS：

td:last-child { 
    width: 1px; 
    white-space: nowrap; 
}

段：

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.products = [ 
 
    { name: "Milk", ok: true }, 
 
    { name: "Bread", ok: true }, 
 
    { name: "Cheese", ok: false } 
 
    ]; 
 
}); 
 

 
app.directive("toggle", function() { 
 
    return { 
 
     restrict: 'E', 
 
     require: 'ngModel', 
 
     scope: { ngModel: "=",on:"@", off:"@" }, 
 
     template: "<label><input type='checkbox' ng-model='ngModel'>{{ngModel?on:off}}</label>" 
 
    }; 
 
});

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    resize:both 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    overflow:auto; 
 
} 
 

 
td:last-child { 
 
    width: 1px; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-app="myApp" ng-controller="myCtrl"> 
 
    <tr ng-repeat="p in products"> 
 
    <td>{{p.name}}</td> 
 
    <td>{{p.name}}</td> 
 
    <td><toggle ng-model="p.ok" on="OKOKOK" off="KO"/></td> 
 
    </tr> 
 
</table>

來源

2017-09-12 15:39:13 kapser

自動調整最後一列

回答

相關問題