CSS calc not working for <td> width - html

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.

Answer 2

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% / 6 * 3.5);
}
<table>
<tbody>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
</tbody>
</table>