Box-shadow is appearing in all columns in IE

Question

I'm giving box-shadow to tr in a table It's working fine in all browsers, but in IE-10 it's showing box-shadow in all td, Why?

tr {
  box-shadow: 2px 0 0px #888 inset;
}

<table border=0 cellsapcing=0 cellpadding=6>
  <tr>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>

Chrome

IE 10

Note: I can't use border that's why I gave box-shadow

Answer 1

I'd take a bit of a different approach, and assign the box shadow to the first th and td elements. This solution moves around the problem, rather than solving it - but is just as valid I feel.

tr th:first-child, tr td:first-child {
  box-shadow: 2px 0 0px #888 inset;
}

<table border=0 cellsapcing=0 cellpadding=6>
  <tr>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>