追加方法UI-GRIDの端に空白1

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