【IE対応】tableの見出しを固定してスクロールする

したいこと

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;
    }
    table th {
      background: #ccc;
      padding: 25px 5px;
      position: fixed; ←★これ
      left: 0;
      min-width: 60px;
      min-height: 26px;
    }
    table td {
      padding: 25px 5px;
      min-width: 60px;
    }
    table th + td {
      display: inline-block;
      padding: 0;
      border: none;
    }

JS

(function () {
  const myFunction = table => {
    const aryMax = (a, b) => Math.max(a, b);
    const setWidthPx = (el,px) => el.style.width = `${px}px`;
    const ths = table.querySelectorAll("th");
    const tds = table.querySelectorAll("th + td");
    const tdWidthAry = [];
    for (const th of ths) {
      tdWidthAry.push(th.clientWidth);
    }
    let tdWidthMax = tdWidthAry.reduce(aryMax);
    for(let i = 0; i < tds.length; i++){
      setWidthPx(tds[i],tdWidthMax);
      setWidthPx(ths[i],tdWidthMax);
    }
  };
  myFunction(document.querySelectorAll("table")[0]);
}());

HTML

<div class="c-table">
  <table>
    <thead>
      <tr>
        <th>thの文字の長さthの文字の長さ</th>
        <td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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は各々調整してください。