環境はIE8です。
htmlでdivブロック内のテーブルの左端の列を固定したいのですがposition:absolute;で固定するとどうしてもdivブロックからはみ出してしまいます。
固定しつつdivブロックの中に留める方法は何かあるのでしょうか?
html
1<!doctype html> 2<meta charset="utf-8"> 3<div class="area"> 4 <div class="wrapper"> 5 <table> 6 <tr><td class="out-of-table-fixed">表の外側で固定</td><td>表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text1</td><td>あいうえお</td></tr> 7 <tr><td class="out-of-table-fixed">表の外側で固定</td><td>表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text2</td><td>かきくけこ</td></tr> 8 <tr><td class="out-of-table-fixed">表の外側で固定</td><td>表の内側で固定</td><td>ここから右のセルだけがスクロールされます</td><td>text3</td><td>さしすせそ</td></tr> 9 </table> 10 </div> 11</div> 12 13<style> 14*{ 15 box-sizing:border-box; 16 font-family:meiryo;} 17.area{ 18 width:300px; 19height:150px; 20 position:relative; 21 border:5px solid darkslateblue; 22 background:#FFE2FA;} 23.wrapper{ 24 width:290px; 25height:140px; 26 overflow:scroll;} 27td{ 28 width:180px; 29 height:60px; 30 padding:0; 31 vertical-align:top; 32 background:mintcream; 33 border-right:2px solid red; 34 border-bottom:2px solid red;} 35table{ 36 table-layout:fixed; 37 width:100%; 38 border:solid darkslateblue; 39 border-spacing:0;} 40/*absoluteで列を固定しようとするとdivブロックからはみ出してしまう 41td.out-of-table-fixed{ 42 position:absolute; 43 left:0px;}*/ 44</style>
JavaScript を使ってもいいですか?
やはりJavaScriptが必要なのですね。
JavaScriptは使えます。後ieは8でした。追記しておきます。
教えていただけると助かります。
IE8ですか?!
いやちょっと、それはもう、テストする環境がないので、回答は控えさせてください……
いえいえ、大丈夫です。
お付き合いしていただきありがとうございました。
初心者なのですが案件がどうやらie8らしくて調べともなかなか出てこないんですよね(笑)
けどなんとかなりそうな予感がしてきてます。
ie11があればデベロッパーツールからエミュレートモード?だかでie8のテストが出来るっぽいです!
上司が言ってました。←責任転嫁
ああ、そういえば、そんなのがありましたね。
昔は、IETester とかも使ってました。
思い出してきたので、ちょっと試してみます。
いくつか stickyのポリフィルを試してみましたが、なかなかうまくいかないようです。
すみませんが、お役に立てなさそうです。
スクリーンに対する座標を取得して fixed で固定する、などの処理を JavaScript で完全に自製しなくてはいけなさそうですね。しかも、ES3とCSS2.1ベースで。
きっつー……
ありがとうございます
こんな親身に付き合っていただけただけでも充分でございます!
サイト参考になりそうです。
ありがとうございました!
回答1件
あなたの回答
tips
プレビュー