the css selector :empty for tr td is not working

It is not working as your TD has a blank space in itself. Do not let that '&nbsp' come in TD and it will work as '&nbsp' does not fulfill the condition of :empty

And change the following

#wp-calendar tr td:empty {
    background:none !important;
}

you can achieve it as follows:

#wp-calendar tr td.pad:not(:empty) {
    border:none !important;
    background-color: rgba(255,255,255,0.04);
}

if you want to apply some style in case of empty. try following:

#wp-calendar tr td.pad:(:empty) {
   /* some style */
}

You need to remove  s anyways, because they are considered non-empty text content. In order to make empty cells invisible, you can also use empty-cells: hide for the table element. It has better browser support than :empty pseudo-class and may be more universal, because it treats cells with only whitespace characters (regular space, line break, tabulation etc.) in them as empty, while :empty requires the element to contain completely nothing (including whitespace characters) to be considered empty.

See edited example: http://codepen.io/SelenIT/pen/xEpDn