-ms-transform will not work in the table header group (thead) in IE10 (and presumably below)

Question

Can someone help me find a way to get -ms-transform working on the table header? The context is that I am rearranging the title (using Javascript and CSS conversion) to make it stick to the top of the screen when the user scrolls to the point that the title would otherwise be no longer visible (and using rmay will not be able to read or understand data, also without visible column headers).

Here is the fiddle (without Javascript), but I will also post the code here:

<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, and Opera, but it is not surprising that Internet Explorer (version 10, but presumably 9) will not play well. I admit that it might not make much sense to rearrange the table title, but if other browsers don't mind (fortunately), is there perhaps a workaround for IE?

Answer 1

It turns out that the conversion works in separate cells of the table, so I managed to fix it by applying -ms-transform specifically to all td -children thead , and not to the header itself.

In the simplified example used in the question, all that is required is to add the following:

 #move-thead td { -ms-transform: translate(10px, 10px); } 

Updated script . My title now also scrolls in IE.

Answer 2

After you played with many settings in IE and did not start anywhere, I decided to do a very small amount of research and found that IE stopped working with clean css sheets about 4 years ago.

However, there is a solution that can be found at http://css-tricks.com/persistent-headers/

This uses jquery, but provides what you seem to ask and looks like a longer term solution to your problem.

Hope this helps you.