Internet Explorer - CSS box-Shadow on table not working for IE browser

Question

I tried box-shadow for tr in Table and works fine for Chrome but not working for IE browser. I checked almost all suggested links on Stack Overflow but I couldn't get any reason and answer.

This is the example I used http://jsfiddle.net/c_Dhananjay/h9tx9tpx/ where i do :

    table tbody tr:hover {
        background-color:#13326b;
        color:#ffffff;
        text-shadow: 1px 2px #000000;
        box-shadow: inset 6px 0px 0px -1px #ff0000;
        -webkit-box-shadow:inset 6px 0px 0px -1px #ff0000;
        -moz-box-shadow:inset 6px 0px 0px -1px #ff0000;
    }

    table tbody tr {
        height:100px;
    }

I hope this may look like a duplicate question but hope you will show correct path for solution.

Answer 1

I applied box-shadow on td instead of tr with some changes in css and that works for chrome / safari / IE11 / EDGE

Here is working link : https://jsfiddle.net/h9tx9tpx/2/

Working code :

      // css file
        table tbody tr {
            background-color:#13326b;
            color:#ffffff;
            text-shadow: 1px 2px #000000;
        }

        table tbody tr {
            height:70px;
        }

        table {
            border-collapse: separate;  
        }

        td:first-child:before{
            box-sizing: border-box;
            content:'';
            position:absolute;

            left:0;
            right:2px;

            display: block;
            height: 60px;
            box-shadow: inset 6px 0px 0px -1px #ff0000;
            -webkit-box-shadow: inset 6px 0px 0px -1px #ff0000;
        }