html - -ms-transform won't work on table header group (thead) in IE10 (and below, presumably) -

can me find way -ms-transform working on table header? context i'm repositioning header (with javascript , css transform) make stick top of screen when user has scrolled down point header otherwise no longer visible (and use rmay not able read or understand data without visible column headers).

here's fiddle (without javascript), i'll post code here well:

<style> body { background-color: gray; padding: 0; margin: 0;}         #move-table {      transform: translate(10px, 10px);     -ms-transform: translate(10px, 10px);      -webkit-transform: translate(10px, 10px);      -o-transform: translate(10px, 10px);      -moz-transform: translate(10px, 10px);      background-color: green; } #move-thead {      transform: translate(10px, 10px);     -ms-transform: translate(10px, 10px);      -webkit-transform: translate(10px, 10px);      -o-transform: translate(10px, 10px);      -moz-transform: translate(10px, 10px);      background-color: red;  } </style>  <table width="400" id="move-table">     <thead id="move-thead">         <tr>             <td>x</td>             <td>x</td>             <td>x</td>             <td>x</td>         </tr>     </thead>     <tbody>         <tr>             <td>x</td>             <td>x</td>             <td>x</td>             <td>x</td>         </tr>     </tbody> </table> 

this works fine in chrome, firefox , opera, unsurprisingly internet explorer (version 10, presumably 9 well) won't play nice. i'll admit may not make lot of sense repositioning table header, if other browsers don't mind (thankfully), perhaps there's workaround ie?

after playing many settings in ie , getting decided small amount of research , discovered ie stopped working pure css sticky tables 4 years ago.

however, there solution can found @ http://css-tricks.com/persistent-headers/

this uses jquery achieves seem asking , looks more long term solution problem.

hope helps you.