tableの列と行を固定するIEのCSS(expression)をJSで書き直そうとしたけど無理だった
テーブルの列と行を固定したい場面があったので、そのメモ*1。
ググって簡単に出てくるのが、Super Tables というJavaScriptのライブラリだったが、
テーブルの幅や高さを任意の大きさに、任意のタイミングで変えたいという用途には、
向かなそうに見えた。
(new superTable した後の、幅/高さ変更用メソッドなどが無いので。
しかもテーブルを複製してdivなどでwrapしたりしていて、幅/高さを変えるのは簡単じゃなさそうに感じた。)
なので、自前でなんとかしようということになるのだが、
行だけならまだしも、列まで固定したいとなると、あまり望むコードは出てこない。
そんな中、HitしたのがIEでのみ動作するコード。
jsajax.com - このウェブサイトは販売用です！ - jsajax リソースおよび情報
IE独自のCSSにJavaScriptが記述できるexpressionを使用しているが、
非常にきれいで単純に書くことができる。
でも、やはりIEのみでの動作は避けたかったので、
これをなんとかJavaScriptに書き換えられないかと思ったわけだが、
タイトルにもあるようにうまく動作させることはできなかった。
試したことは大したことではなく、onscrollイベントを受け取って対象要素のtopやleftを更新すること*2。
IEではうまく動作したのだが、Firefoxでは動かなかった。
というのも、table要素に対してposition:relativeを当てているのだが、
これが効くのは、IEの独自実装。
効かないのが標準(http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/)。
で、上のIEでの列/行固定方法を紹介しているURLのコードはその独自実装あってのもの。
書き換えるのは無理っぽい。
結局、position:absoluteのdivとかで固定カラムの複製を作って、
それを動かしてあげるようにしたのだが、そこそこ重いからあまり納得いかない感じに。
もっといい方法はないものだろうか。
