したいこと
tableの見出しを固定してスクロールさせたい。
対象ブラウザ
- IE
- chorme
- Edge
- FireFox
- Safari
問題
調べてみると、「position:sticky」を使った記述があるが
これだとIEでは動作しない。
解決方法
- 「position:sticky」の代わりに、「position:fixed」を使う
- ↑のままだと、一番最初のセルが固定するセルの下に隠れてしまうので、JSで調整する
サンプルコード
CSS
body{margin:0}.c-table{max-width:900px;width:100%;overflow-x:scroll;}table{border-collapse:collapse;text-align:center;vertical-align:middle;margin-bottom:30px;}tableth{background:#ccc;padding:25px5px;position:fixed;←★これleft:0;min-width:60px;min-height:26px;}tabletd{padding:25px5px;min-width:60px;}tableth+td{display:inline-block;padding:0;border:none;}JS
(function(){constmyFunction=table=>{constaryMax=(a,b)=>Math.max(a,b);constsetWidthPx=(el,px)=>el.style.width=`${px}px`;constths=table.querySelectorAll("th");consttds=table.querySelectorAll("th + td");consttdWidthAry=[];for(constthofths){tdWidthAry.push(th.clientWidth);}lettdWidthMax=tdWidthAry.reduce(aryMax);for(leti=0;i<tds.length;i++){setWidthPx(tds[i],tdWidthMax);setWidthPx(ths[i],tdWidthMax);}};myFunction(document.querySelectorAll("table")[0]);}());HTML
<divclass="c-table"><table><thead><tr><th>thの文字の長さthの文字の長さ</th><td> </td><td>最初</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td></tr></thead><tbody><tr><th>TableHeader1</th><td> </td><td>最初</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td></tr><tr><th>TableHeader1</th><td> </td><td>最初</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td></tr><tr><th>TableHeader1</th><td> </td><td>最初</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td><td>TableHeader3</th><td>TableHeader4</td></tr></tbody></table></div>終わりに
cssは各々調整してください。