为什么我的嵌套表格列宽在IE中不正确但不是Chrome？

Question

我创建了this fiddle to experiment aligning columns between tables and their contained sub-tables.

为了实现这一点，我使用colgroups并在CSS中指定列宽，如下所示：

  <colgroup>
    <col class="orderNumColumnWidth"/>
    <col class="itemNumColumnWidth"/>
    <col class="itemNameColumnWidth"/>
    <col class="itemDescColumnWidth"/>
  </colgroup>

在Chrome中，列宽正确计算并匹配得很好：

但是，在IE 11中，子表中的第一列错误对齐了几个像素：

错误对齐很小，但我无法弄清楚它存在的原因，或者为什么Item＃列错位，但Name列不是。

让我更加困惑的是，如果我使用IE中的f12菜单进行调查，它实际上表示Item＃列标题更宽而不是内容，这看起来并不像通过观察就是这样。

有没有人知道导致这种情况的原因，以及我如何解决这个问题？