Question

使用AngularJS和/或Bootstrap，是否可以声明：

td-X : {
    min-width: Xpx; 
    max-width: Xpx; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

然后

<td-320>my fixed column</td-320>

或

<td class="td-150">my fixed column</td>

PS。

如果它有帮助，我也会使用Angular Smart Table ...

Answer 1

自定义指令怎么样？

var myApp = angular.module('myApp', []);

myApp.directive('fixedWidth', function() {
  return {
    restrict: 'A',
    scope: {
      'fixedWidth': "@"
    },
    link: function(scope, element, attr) {
      if (!isNaN(scope.fixedWidth)) {
        var widthPx = scope.fixedWidth + 'px';
        element.css('width', widthPx);
      }
    }
  }
});

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <table>
    <tbody>
      <tr>
        <td fixed-width="50">50px</td>
        <td fixed-width="100">100px</td>
        <td fixed-width="150">150px</td>
      </tr>
    </tbody>
  </table>
</div>

通过td-width固定宽度td

1 个答案: