如何在ANGULAR 1中的UI-GRID末尾添加空格

Question

我们需要在ui网格的末尾添加空格。请查看图片以获得更清晰：

Answer 1

您可以修改所有列的宽度，使其总数不会完全填满容器。然后，通过CSS，您可以调整该空间。这里有一个例子：

https://codepen.io/davidballester/pen/XejpJb

这是列定义：

$scope.gridOptions.columnDefs = [{
  name: 'id',
  width: "20%"
}, {
  name: 'name',
  width: "30%"
}, {
  name: 'age',
  displayName: 'Age (not focusable)',
  allowCellFocus: false,
  width: "15%"
}, {
  name: 'address.city',
  width: "20%"
}];

然后，CSS调整：

.ui-grid-top-panel {
  background: none;
  border: none;
}

.ui-grid-header-cell {
  background: #ccc;
}

.ui-grid-viewport {
  overflow: hidden !important;
}

.ui-grid-header {
  border: none;
}