如何在Ext JS网格面板中删除标题边框？

Question

I have a grid panel and I want to fully hide the header. I'm using the hideHeaders: true configuration option but it still leaves a faint 1px blue border where the header was. How can I not have that 1px blue header?

This is a JSFiddle showing the problem.

vs

I know it seems like a subtle difference but in my application that border looks really bad. I thought this would fully remove the header but it didn't:

Ext.create('Ext.grid.Panel', {
    store: store,
    hideHeaders: true
});

Answer 1

I'm using this sass block to style my column headers:

.x-grid-header-ct{
    border-bottom: 1px solid #ecedee;
    padding-left: 15px;
    .x-column-header {
        border: none;
        background: none;
        .x-column-header-inner{
            padding: 10px 15px 15px 7px;
            &:before{
                border: none;
            }
            .x-column-header-text{
                color: #222;
                white-space: normal;
                font-size: 18px;
            }
        }
        .x-column-header-over{
            background: none;
            .x-column-header-trigger{
                display: none;
                background-color: white;
            }
        }
        .x-column-header-inner-empty{
            background: none;
        }
    }
}