javascript - Remove Column Separators from default ng grid angularjs -

i using default ui-grid , want remove column separator line (the line in between 2 columns separation) grid. can see in plunkr, name , gender separated thin grayish line. have checked various solutions not remove separator. instead of separator need space between columns here code. how can achieve that... plunkr source

$scope.gridoptions = { enablesorting: true, enablefiltering: true, showtreeexpandnochildren: false, columndefs: [   { name: 'name', width: '30%' },   { name: 'gender', width: '20%' },   { name: 'age', width: '20%' },   { name: 'company', width: '25%' },   { name: 'state', width: '35%' },   { name: 'balance', width: '25%', cellfilter: 'currency' } ], onregisterapi: function( gridapi ) {   $scope.gridapi = gridapi;   $scope.gridapi.treebase.on.rowexpanded($scope, function(row) {     if( row.entity.$$hashkey === $scope.gridoptions.data[50].$$hashkey && !$scope.nodeloaded ) {       $interval(function() {         $scope.gridoptions.data.splice(51,0,           {name: 'dynamic 1', gender: 'female', age: 53, company: 'griddable grids', balance: 38000, $$treelevel: 1},           {name: 'dynamic 2', gender: 'male', age: 18, company: 'griddable grids', balance: 29000, $$treelevel: 1}         );         $scope.nodeloaded = true;       }, 2000, 1);     }   }); } 

};

you can play columndefs , cellclass, please check this

js snip:

   columndefs: [       { name: 'name', width: '30%', cellclass: 'noborder' },       { name: 'gender', width: '20%', cellclass: 'noborder' },       { name: 'age', width: '20%', cellclass: 'noborder' },       { name: 'company', width: '25%', cellclass: 'noborder' },       { name: 'state', width: '35%', cellclass: 'noborder' },       { name: 'balance', width: '25%', cellclass: 'noborder', cellfilter: 'currency' }     ], 

css:

.noborder {   border: none; } 

you can same header row headerclassor headercelltemplate