具有表格布局的嵌套表：修复影响父表格

Question

我正在为嵌套表（在<td>元素内）提供样式table-layout: fixed。出于某种原因，这也影响了我的父表：

演示：

document.getElementById('set-fixed').addEventListener('click', function() {
  document.getElementById('result').innerHTML = (
    document.getElementById('nested').classList.toggle('fixed')
    ? 'fixed'
    : 'not fixed'
  )
})

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 2px;
}

table.fixed {
  table-layout: fixed;
}

<p>Set nested table's style <code>table-layout: fixed</code>: <button id="set-fixed">Toggle</button> (current: <span id='result'>not fixed</span>)</p>
<table width="100%">
  <tr>
    <th>Name</th>
    <th>Description</th>
    <th>Column 3</th>
    <th>Column 4</th>
  </tr>
  <tr>
    <td colspan="4">
      <table id='nested' width="100%">
        <tr>
          <td>Foo</td>
          <td>Baaaaaaar!</td>
          <td>Baz</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Taco</td>
    <td>Beautiful, cheesy, and delicious.</td>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>Marshmallow</td>
    <td>Too sweet for my tastes!</td>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

这是Firefox的错误，还是有意的（根据相关官方规范）？如何在不影响父表的情况下修复嵌套表的布局？