IE11でのテーブル列ヘッダー行ヘッダーを固定する方法

Question

IE11でのテーブル列ヘッダー行ヘッダーを固定する方法、または参考になるサイトなどを教えて頂きたいです。

chromeなどではposition: stickyが使えるようですが、IE11ではサポートされていないとのことで、
stickyfillを使用し、実装をしてみたのですが、
ヘッダーが固定されず、テーブルをはみ出すなど意図しない挙動をしました。

stickyfillを使用しない方法も調べてみましたが、
列ヘッダーと行ヘッダー両方固定する方法はなかなか見つかりませんでした。
（列ヘッダーのみを固定する方法は出てきました）

よろしければ、列ヘッダーと行ヘッダー両方固定する方法教えて頂きたいです。
よろしくお願いします。

Answer 1

実はテーブルをクローンして二重表示するとそれっぽいことはできます
あとはテーブル次第です

Comments

[kurage_room]

ご回答ありがとうございます。

なるほど！それは初知りでした…
テーブルをクローンするというのが分からず調べたのですが、
jQueryのclone()を使うということでよろしいでしょうか。

[yambejp]

具体的なテーブルを提示下さい、
またどのようにスクロールさせるかもあわせて提示ください

[yambejp]

とりあえず適当に・・・

<script>
window.addEventListener('DOMContentLoaded',function(){
var fuga=document.querySelector('#hoge').cloneNode(true);
fuga.setAttribute('id','fuga');
fuga.style.height="100px";
fuga.style.overflowY="hidden";
fuga.style.position="absolute";
fuga.querySelector('tbody').style.opacity=0;
fuga.querySelector('thead').style.backgroundColor="white";

document.querySelector('#wrap').appendChild(fuga);
});
</script>
<style>
table{border-collapse:collapse;}

#hoge{
height:100px;
overflow-y:scroll;
position:absolute;
}
#wrap{
position:relative;
}
</style>
<div id="wrap">
<div id="hoge">
<table>
<thead>
<tr>
<th>test</th>
<th>testtesttest</th>
<th>t</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td></tr>
</table>
</div>
</div>