Webkit inset shadow in td w/ border-collapse

HTML

<div>Hello</div>
<table>
    <tbody>
        <tr>
            <td>Hello world</td>
            <td>Hello world</td>
        </tr>
        <tr>
            <td>Hello world</td>
            <td>Hello world</td>
        </tr>
    </tbody>
</table>

CSS

div {
    height:100px;
    width:100px;
    background: lightblue;
    border-left:10px solid #000;
    margin-bottom: 20px;
    
    box-shadow: inset 0 -10px 10px -10px #666;
    -moz-box-shadow: inset 0 -10px 10px -10px #666;
    -webkit-box-shadow: inset 0 -10px 10px -10px #666;
    -ms-box-shadow: inset 0 -10px 10px -10px #666;
}

table{
    border-collapse:collapse;
}

td{
    padding: 10px;
    background: lightgreen;
    border-left: 10px solid #000;
    
    box-shadow: inset 0 -10px 10px -10px #666;
    -moz-box-shadow: inset 0 -10px 10px -10px #666;
    -webkit-box-shadow: inset 0 -10px 10px -10px #666;
    -ms-box-shadow: inset 0 -10px 10px -10px #666;
}

td:first-child{
    background:lightyellow;
}