box-shadow on tables with border-collapse in IE11 don't work?

[1DMF]

Hi,

I seem unable to get the box-shadow to show in IE on a table row if the table is set to

border-collapse:collapse;

There is a known bug since IE10 :

https://connect.microsoft.com/IE/feedback/details/770636/ie10-box-shadow-bug-not-rendered-on-tables

Which it seems M$ aren't interested in fixing, is there a work-a-round?

I've tried to apply 'separate' to the border-collapse on the table row, but without success

.banner_adverts tr.selected {
    border-collapse:separate !important;
    box-shadow:0px 0px 3px 3px rgba(255,20,20,.8);
    border-radius:1px;
    } 
    .banner_adverts tbody tr:hover {
    background-color: rgba(245,240,40,.5);   
    cursor:pointer;
    }

I know it's a 'table' property not a 'table row' property!

For the time being I have implemented

.banner_adverts tr.selected {
    border-collapse:separate !important;
    box-shadow:0px 0px 3px 3px rgba(255,20,20,.8);
    border-radius:1px;
    background-color: rgba(255,20,20,.8);
    } 
    
.banner_adverts tbody tr:hover:not(.selected) {
    background-color: rgba(245,240,40,.5);   
    cursor:pointer;
    }

So I added a BG color to the selected class and included a 'not' CSS3 selector for the hover pseudo class so you can see a selected row when hovering a bit easier.

Other suggestions welcome!
1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music