CSS calc not working for <td> width

Question

I'd like Cell A to leave exactly 100px for the remain two cells. I would think calc(100% - 100px) would be sufficient as this works just fine in many other situations. Why isn't it working here?

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #555;
  font-family: sans-serif;
  table-layout: fixed;
}

td {
  padding: 10px;
  box-sizing: border-box;
  text-align: center
}

td+td {
  border-left: 1px solid #555;
}

td:first-child {
  width: calc(100% - 100px);
}

<table>
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell C</td>
    </tr>
  </tbody>
</table>

Answer 1

At least in Chrome, it seems to work when defining the width on a colgroup element:

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #555;
  font-family: sans-serif;
  table-layout: fixed;
}

td {
  padding: 10px;
  box-sizing: border-box;
  text-align: center
}

td+td {
  border-left: 1px solid #555;
}

colgroup:first-child {
  width: calc(100% - 100px);
}

<table>
  <colgroup/>
  <colgroup span="2" />
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell C</td>
    </tr>
  </tbody>
</table>

---

Update April 1st, 2020

This no longer seems to work in the current version of Chrome. I'll leave the answer to serve as a test case should the behavior change in the future.