html - 指定列以使用最大宽度表中的额外空间

Question

我有一张桌子：

table {
  width: 100%;
  border: 1px solid grey;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  border: 1px solid grey;
  padding: 5px;
}

.rest-of-width {
  background: red;
}

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>    
    <th class="rest-of-width">Notes</th> 
  </tr>
  <tr>
    <td>1</td>
    <td>Foo bar baz</td>
    <td>This column should take up the rest of the space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

我已将其宽度设置为 100%，并且表格内的所有列都按预期自动调整大小为 100%。

但是，我希望所有列的大小都像表格宽度是自动的一样，除了上面有类的列rest-of-width，它应该占用剩余空间。

有点像这个 flexbox 示例：

.wrapper {
  display: flex;
  border: 1px solid grey;
}

.wrapper__a,
.wrapper__b,
.wrapper__c {
  padding: 5px;
  border: 1px solid grey;
}

.wrapper__c {
  flex: 1;
  background: red;
}

<div class="wrapper">
  <div class="wrapper__a">Id</div>
  <div class="wrapper__b">Name</div>
  <div class="wrapper__c">Notes</div>
</div>

这可以使用 CSS 属性吗？