-ms-transform不会在IE10（以下，假设）的表头组（thead） [英] -ms-transform won't work on table header group (thead) in IE10 (and below, presumably)

问题描述

任何人都可以帮助我找到一种方法来获得-ms转换工作的表头？上下文是，我重新定位头（使用Javascript和CSS变换），使其粘贴到屏幕的顶部，当用户已经向下滚动到标题，否则将不再可见的点（和使用r无法读取或了解数据，以及没有可见的列标题）。

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

这里是一个小提琴（没有Javascript），但我会在这里发布代码：

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>

这在Chrome，Firefox和Opera中可以正常工作，但不出意外的是Internet Explorer（版本10，以及）不会玩好。我会承认，重新定位表头可能不太有意义，但如果其他浏览器不介意（谢天谢地），那么也许有一个IE的解决方法？

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?

推荐答案

结果，转换对单个表单元格工作，所以我设法通过应用 -ms-transform 特别指向 td 所有 thead 的全部，而不是标题本身。

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);
}

更新小提琴。我的标题现在也在IE中快乐地滚动。

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

这篇关于-ms-transform不会在IE10（以下，假设）的表头组（thead）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！