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

# したいこと
tableの見出しを固定してスクロールさせたい。

![image (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/98f44596-abe6-9d3d-d595-a2b4e8ddc665.png)


# 対象ブラウザ
* IE　
* chorme
* Edge
* FireFox
* Safari

#問題
調べてみると、「position:sticky」を使った記述があるが
これだとIEでは動作しない。

#解決方法
* 「position:sticky」の代わりに、「position:fixed」を使う
* ↑のままだと、一番最初のセルが固定するセルの下に隠れてしまうので、JSで調整する

#サンプルコード

## CSS

```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

```javascript
(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

```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は各々調整してください。