自动调整最后一列

Question

我需要对最后一列进行自动调整，即不超过容纳元素的最大大小。

我的代码（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>

Answer 1

我认为这就是你要找的东西。 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>

Answer 2

您需要做的就是在下面的示例中制作最后一个td和inline-something，我将其设为inline-table

＆＃13;

＆＃13;

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>"
    };
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;