Search code examples
cssslickgrid

Remove horizontal cell borders in SlickGrid?

I'm trying to remove the horizontal cell borders in SlickGrid. I'm trying this:

var columns = [
    {id="col0", name:"Column 0", field:"imgUrl", cssClass:"cell-image"},
    {id="col1", name:"Column 1", field:"col1", cssClass:"cell-text"},
    {id="col2", name:"Column 2", field:"col2", cssClass:"cell-text"}
];

And in my CSS:

.cell-text {
    vertical-align: middle;
    border-top: none;
}

A side effect of this is that my cell-text cells are 1px higher than my cell-image cell, causing the grid to look jagged. Is there a way to remove borders from cells? I'd be willing to create a formatter that does this as well, if that's the best way to go.

Solution

  • Set a marker class on one of the containers and specify a descendent rule: ".no-lines-grid .slick-cell { ... }".