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

问题

Can anyone help me find a way to get -ms-transform working on a table header? The context is that I'm repositioning the header (with Javascript and a CSS transform) to make it stick to the top of the screen when a user has scrolled down to the point that the header would otherwise no longer be visible (and the use rmay not be able to read or understand the data as well without visible column headers).

Here's a fiddle (without the Javascript), but I'll post the code here as 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 and Opera, but unsurprisingly Internet Explorer (version 10, but presumably 9 as well) won't play nice. I'll admit it may not make a lot of sense to be repositioning a table header, but if the other browsers don't mind (thankfully), then perhaps there's a workaround for IE?

回答1:

Turns out the transform does work on individual table cells, so I managed to fix this by applying -ms-transform specifically to all the td-children of thead, rather than the header itself.

In the simplified example used in the question, all it would take, then, is to add this:

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

Updated Fiddle. My header now scrolls along happily in IE, too.

回答2:

After playing with many settings in IE and getting nowhere I decided to do a very small amount of research and discovered that IE stopped working with pure css sticky tables about 4 years ago.

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

This uses jquery but achieves exactly what you seem to be asking and looks like a more long term solution to your problem.

Hope this helps you.

来源：https://stackoverflow.com/questions/17777485/ms-transform-wont-work-on-table-header-group-thead-in-ie10-and-below-presu

标签

html

css

internet-explorer

cross-browser