CSS calc在HTML表格中不起作用

Question

我正在尝试创建HTML表格，其中最后一列比其他列宽。我使用padding-right得到了预期的行为。

table {
  border-collapse: collapse;
  width: 80%
}
td,
th {
  border: 1px solid black;
}
td:last-child,
th:last-child {
  padding-right: 30px;
}

Expected behaviour using <i>padding-right</i>
<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

现在我的问题是如何使用CSS calc获得相同的行为？ 以下是我想要实现它的示例JSFiddle with both examples。

table {
  border-collapse: collapse;
  width: 80%
}
td,
th {
  border: 1px solid black;
  width: calc((100% - 30px) / 4);
}
td:last-child,
th:last-child {
  width: calc((100% - 30px) / 4 + 30px);
}

Hopefully the same behaviour as above using <i>calc</i>
<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>