4

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

这是一个小提琴（没有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 有解决方法？

4

2 回答 2

3

原来转换确实适用于单个表格单元格，所以我设法通过-ms-transform专门应用于所有td-children来解决这个问题thead，而不是标题本身。

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

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

更新了小提琴。我的标题现在也可以在 IE 中愉快地滚动。

于 2013-07-26T15:05:39.207 回答
2

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

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

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

希望这对您有所帮助。

于 2013-07-25T13:58:55.680 回答