ng-grid with no vertical bars

问题

Trying to remove vertical bars between columns in ng-grid.

I grabbed the default rowTemplate, removed the div, and put it in gridOptions:

rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div ng-cell></div></div>',

which actually works, but how do I do the same for the header?

There's certainly some functionality for it:

<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 30px;">&nbsp;</div>

but how do I access it?

回答1:

like this?

        headerRowTemplate: '<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell"><div ng-header-cell></div></div>',

Plunker

回答2:

You could add the below code in your custom css file:

.ngVerticalBar 
{
    width: 0px;
}

i.e. In the latest version of ui-grid(ng-grid), the code should be:

.ui-grid-cell 
{
    border-right: 0px;
}

来源：https://stackoverflow.com/questions/25297110/ng-grid-with-no-vertical-bars