-ms-transform 不适用于 IE10 中的表头组（thead）（大概以及以下）

Question

谁能帮我找到一种方法让 -ms-transform 在表头上工作？上下文是我正在重新定位标题（使用 Javascript 和 CSS 转换）以使其在用户向下滚动到标题将不再可见的点时粘在屏幕顶部（并且使用如果没有可见的列标题，r可能无法读取或理解数据）。

Here's a fiddle（没有 Javascript），但我也会在这里发布代码：

<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>

这在 Chrome、Firefox 和 Opera 中运行良好，但不出所料，Internet Explorer（版本 10，但也可能是 9）不会很好玩。我承认重新定位表头可能没有多大意义，但如果其他浏览器不介意（谢天谢地），那么也许 IE 有解决方法？

Answer 1

结果证明转换确实适用于单个表格单元格，因此我设法通过将 -ms-transform 专门应用于 thead 的所有 td-children 而不是标题本身来解决此问题。

在问题中使用的简化示例中，只需添加以下内容：

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

Updated Fiddle。我的标题现在也可以在 IE 中愉快地滚动了。

Answer 2

在 IE 中使用了许多设置但一无所获后，我决定进行少量研究，发现 IE 大约在 4 年前停止使用纯 css 粘性表格。

但是，可以在http://css-tricks.com/persistent-headers/找到解决方案

这使用了 jquery，但完全符合您的要求，并且看起来像是对您的问题的更长期的解决方案。

希望对你有所帮助。