group header style

Flow
1

Hello, I’m just learning vaadin and expect to migrate my software to vaadin.

I have some problem styling Grid with group header, for example image below:

I want some unused HeaderCells to styled like disabled component, like image below:
the color of the cell is plain gray and no border.

I’ve tried using setStyleName on HeaderCell object and in the css I specified background-color and border-bottom, but no effect. I inspected the element, looks like the valo theme make my style inactive, because their strike through like this:
background-color
 and
border-bottom

I appreciate anyone who willing to help me. Thanks and sorry for my bad english.

2

If inspector shows strikethrough to your style definitions, it indeed means as you assumed that your selector is not specific enough and Valo wins with its more specific selector. Can you post the CSS you tried.

3

I maybe have found the solution by adding !important, but I read somewhere using !important is not recommended. So if someone have better alternative, please comment.

my css:

    .disabled-header-cell {
        background-image: none !important;
        background-color: #fafafa !important;
        border-bottom: 0px !important;
    }