css - Chrome 以外のすべてのブラウザーのテーブルで使用すると、calc() が失敗するのはなぜですか?

Question

calcテーブルのセルの幅を指定するために使用しています。これは Chrome では機能しますが、他のブラウザーでは機能しません。

Caniuse は、他のブラウザーでのcalc に関する問題については言及していません。

HTML:

<table>
  <thead>
    <tr>
      <th class="first">One</th>
      <th class="second">Two</th>
      <th class="third">Three</th>
      <th class="fourth">Four</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first"></td>
      <td class="second"></td>
      <td class="third"></td>
      <td class="fourth"></td>
    </tr>
  </tbody>
</table>

CSS（私はSassを使用していますが）：

table {
    width: 1200px;
    margin: 20px auto 0;
    table-layout: fixed;
}

th:nth-child(2n) {
    background: grey;
}

th.first {
    width: calc(100% * 0.1);
}

th.second {
    width: calc(100% * 0.4);
}

th.third {
    width: calc(100% * 0.25);
}

th.fourth {
    width: calc(100% * 0.25);
}

ご覧のとおり、IE11 はすべてのセルを同じ幅に解決します。

ここに CodePen があります。