html - -ms-transform 不适用于 IE10(及以下，大概)中的表标题组 (thead)

Question

谁能帮我找到一种方法让 -ms-transform 在表头上工作？上下文是我正在重新定位标题(使用 Javascript 和 CSS 转换)，以使其在用户向下滚动到标题不再可见的位置(以及使用如果没有可见的列标题，我们可能也无法阅读或理解数据)。

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 专门应用于 的所有 td-children 来解决此问题>thead，而不是 header 本身。

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

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

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