【問題解決】col要素のspan属性を小さい値に変更すると、IE11では強制終了が発生する



# 環境
* Internet Explorer 11 (11.125.16299.0)
* Windows10

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/11038621-c49b-97c0-6a01-c80b4c3ec874.png)

# 実現したいこと
以下のテーブルの列数を、JavaScriptで変更しようとしています。
1列目はヘッダ列
2列目以降はデータ用の列で、列数が変わります。

列数を変更するために、以下の処理を実施します。
1. col要素のspan属性を変更
2. thead要素内のth要素の数を変更
3. tbody要素内のtd要素の数を変更

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/b8c9dadd-0cdf-ee25-0fb3-8d81330275a8.png)

```html:original.html
<table>
  <col>
  <col id="body-col" span="2" style="width:100px;">
  <thead>
    <tr><th>Name</th><th>2017</th><th>2018</th></tr>
  </thead>
  <tbody>
    <tr><th>Japan</th><td>1</td><td>2</td></tr>
    <tr><th>U.S.A</th><td>11</td><td>12</td></tr>
  </tbody>
</table>
```

```css
table {
    border-collapse: collapse; /* この指定に注意 */
}
table, td, th {
  border: 1px solid black;
}
th {
  background-color:gray;
}
```



# 問題
データ用の列数を2列から1列に変更するために、JavaScriptで`document.getElementById("body-col").span = 1;`を実行したら、Internet Explorer11では強制終了が発生しました。

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/58920fae-6939-6555-7b3d-52c7b75e482f.png)


<p data-height="500" data-theme-id="0" data-slug-hash="MVYQMY" data-default-tab="html,result" data-user="yuji38kwmt" data-embed-version="2" data-pen-title="col要素のspan属性値を変更" class="codepen">See the Pen <a href="https://codepen.io/yuji38kwmt/pen/MVYQMY/">col要素のspan属性値を変更</a> by yuji38kwmt (<a href="https://codepen.io/yuji38kwmt">@yuji38kwmt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## IE11以外のブラウザで検証
Edgeも問題ありでした。

| ブラウザ                              | OK/NG | 備考                                         |
|---------------------------------------|:-------:|----------------------------------------------|
| Internet Explorer 11 (11.125.16299.0) | NG    |エラーダイアログが出る                                              |
| Microsoft Edge 41.16299.248.0         | NG    | エラーダイアログは出ないが、画面が更新される |
| Google Chrome 65.0.3325.146           | OK    |                                              |
| Firefox 58.0.2                        | OK    |                                              |

※ Windows10（バージョン1709（OSビルド16299.248））で確認


# 強制終了する場合を検証


## span属性の変更前と変更後の値を検証
span属性の値を小さくすると、強制終了が発生しました。span属性値を大きくする場合は、強制終了は発生しませんでした。

| 変更前のspan属性値 | 変更後のspan属性値 | OK/NG |
|--------------------|--------------------|-------|
| 2                  | 1                  | NG    |
| 2                  | 3                  | OK    |
| 2                  | 10                 | OK    |
| 3                  | 1                  | NG    |
| 3                  | 2                  | NG    |
| 10                 | 9                  | NG    |

## colgroup要素で検証
colgroup要素のspan属性を2から1に変更したとき、強制終了は発生しませんでした。

```html:colgroup要素.html
<table>
  <col>
  <colgroup span="2" style="width:100px;"></colgroup> <!-- 変更箇所 -->
  <thead>
    <tr><th>Name</th><th>2017</th><th>2018</th></tr>
  </thead>
  <tbody>
    <tr><th>Japan</th><td>1</td><td>2</td></tr>
    <tr><th>U.S.A</th><td>11</td><td>12</td></tr>
  </tbody>
</table>
```

## span属性の変更方法を検証

いずれの場合も、強制終了が発生しました。

* `document.getElementById("body-col").span = 1;`
* `document.getElementById("body-col").setAttribute("span", 1);`
* 開発者ツールのDOM Explorerで、`span`属性を`1`に変更


## table要素の状態を検証
いずれの場合も、強制終了が発生しました。

* 最初から1列の場合

```html:最初が1列.html
<table>
  <col>
  <col  span="2" style="width:100px;">
  <thead>
    <tr><th>Name</th><th>2017</th></tr>
  </thead>
  <tbody>
    <tr><th>Japan</th><td>1</td></tr>
    <tr><th>U.S.A</th><td>11</td></tr>
  </tbody>
</table>
```

* col要素のみの場合

```html:col要素のみ.html
<table>
  <col>
  <col span="2" style="width:100px;">
</table>
```


## CSSの有無を検証
CSSを無効にしたら、強制終了は発生しませんでした。
強制終了の要因となるスタイルは、`border-collapse: collapse;`でした。


# 検証した結果のまとめ

* 下記の条件をすべて満たすと、IE11では強制終了が発生する。
    - col要素のspan属性を小さい値に変更する（colgroup要素ではない）
    - table要素のスタイルが`border-collapse: collapse;`である。
* span属性を変更する前のHTMLの状態は、IE11の強制終了と無関係。

# 解決策
col要素でなくcolgroup要素に変更しました。


# 備考
Microsoftにバグ報告しました。
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15308624/

>We are not accepting feedback on Internet Explorer through this portal any longer (unless security related).

IE11はセキュリティ関連以外は受け付けないそうです。