I get this from time to time… “I have added a background color to my SharePoint site but when I go to quick edit or datasheet view in a list, the background color comes through.”

It isn’t that the background color is coming through, it is that SharePoint 2013 didn’t add a background color to the list. It is a transparent. With a little CSS you can overcome that.

The Issue

1. You add a background color to your SharePoint site.
2. It looks fine with your lists.
3. You switch to quick edit or datasheet view for easier editing and all of a sudden that background color just seems weird.

The Fix

Using CSS you can add a background color to either all list views, or alternatively to just the quick edit (datasheet) view.

To affect all lists

.ms-listviewtable {
  background: #fff;
}

To affect only quick edit / datasheet view

table[id^="spgridcontainer"] td {
  background: #fff;
}
table[id^="spgridcontainer"] td.ms-vb-firstCell {
  background: #fff !important;  /* !important used to override inline SharePoint style */
}

I could have just listed the first style statement (table[id^=”spgridcontainer”] td) and then included !important on the background color, but that would unnecessarily add !important to all table cells when we only need it for the first cell. I like to limit how much !important is affecting my code, so I opted to split it out.

The Result