Search code examples
cssasp.net-mvcstylingwebgrid

WebGrid header doesn't change background color using CSS - ASP.NET MVC 3

I have a simple problem: the WebGrid header doesn't change it's background color. Every other element of it responds to a change in the CSS: the footer, the alternating columns... The only element that doesn't respond to a change in the CSS property background-color or background is the header. Anyone has stumbled with this problem?

Here is the CSS I'm using:

.webgrid-header
{   
   background-color: #F4F4F4;
   padding: 6px 5px;
   text-align: center;
   height: 40px;

   border-bottom: 2px solid #959595;
   border-top: 2px solid #CCCCCC;
   border-left: 2px solid #CCCCCC;
   border-right: 2px solid #CCCCCC;
}

And, for instance, I'll put another one that is working:

.webgrid-alternating-row
{
    background-color: #F4F4F4;
    height: 30px;    
    border-bottom: 1px solid #d2d2d2;
    border-left: 2px solid #CCCCCC;
    border-right: 2px solid #CCCCCC;
}

I put the headerStyle: "webgrid-header" in the GetHtml method in the View. Can anyone help me? (and sorry for my English!)

Solution

  • Your table cells have their own backgrounds which are being drawn over the background of the row.