4

テーブルヘッダーで -ms-transform を機能させる方法を見つけるのを手伝ってくれる人はいますか? コンテキストは、ヘッダーの位置を変更して (Javascript と CSS 変換を使用)、ユーザーがヘッダーが表示されなくなるポイントまでスクロールしたときに、ヘッダーが画面の上部に固定されるようにすることです (および使用列ヘッダーが表示されていないと、データを読み取ったり理解したりできない可能性があります)。

これはフィドルです（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 で多くの設定をいじってどこにも行かなかった後、私は非常に少量の調査を行うことに決め、約 4 年前に IE が純粋な CSS スティッキー テーブルで動作しなくなったことを発見しました。

ただし、 http://css-tricks.com/persistent-headers/で見つけることができる解決策があります。

これはjqueryを使用していますが、あなたが求めているように見えるものを正確に達成し、問題に対するより長期的な解決策のように見えます.

これがお役に立てば幸いです。

于 2013-07-25T13:58:55.680 に答える