質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%

Q&A

解決済

1回答

644閲覧

IE8でHTMLのテーブル列固定をうまくやる方法はありますか?

spiderindigo

総合スコア20

0グッド

0クリップ

投稿2020/07/13 10:00

編集2020/07/14 12:55

環境は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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/07/14 07:29

JavaScript を使ってもいいですか?
spiderindigo

2020/07/14 12:54

やはりJavaScriptが必要なのですね。 JavaScriptは使えます。後ieは8でした。追記しておきます。 教えていただけると助かります。
Lhankor_Mhy

2020/07/15 00:43

IE8ですか?! いやちょっと、それはもう、テストする環境がないので、回答は控えさせてください……
spiderindigo

2020/07/15 01:05

いえいえ、大丈夫です。 お付き合いしていただきありがとうございました。 初心者なのですが案件がどうやらie8らしくて調べともなかなか出てこないんですよね(笑) けどなんとかなりそうな予感がしてきてます。 ie11があればデベロッパーツールからエミュレートモード?だかでie8のテストが出来るっぽいです! 上司が言ってました。←責任転嫁
Lhankor_Mhy

2020/07/15 01:12

ああ、そういえば、そんなのがありましたね。 昔は、IETester とかも使ってました。 思い出してきたので、ちょっと試してみます。
Lhankor_Mhy

2020/07/15 04:44

いくつか stickyのポリフィルを試してみましたが、なかなかうまくいかないようです。 すみませんが、お役に立てなさそうです。 スクリーンに対する座標を取得して fixed で固定する、などの処理を JavaScript で完全に自製しなくてはいけなさそうですね。しかも、ES3とCSS2.1ベースで。 きっつー……
spiderindigo

2020/07/15 05:53

ありがとうございます こんな親身に付き合っていただけただけでも充分でございます! サイト参考になりそうです。 ありがとうございました!
guest

回答1

0

自己解決

ちょっと難しそうです。。。

投稿2022/04/16 18:30

spiderindigo

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問