IE9没有使用colgroup正确渲染跨越列

Question

我有一个分为三个表的网格;标题，内容和页脚。 colgroup只是通过JavaScript复制到其他表。页脚应该只有两列跨越。

<table>
    <colgroup>
        <col width="50px" />
        <col width="100px" />
        <col width="200px" />
        <col width="50px" />
        <col width="50px" />
        <col width="50px" />
        <col width="50px" />
        <col width="50px" />
        <col width="50px" />
        <col width="50px" />
    </colgroup>
    <tfoot>
        <tr>
            <td colspan="7" class="text-align-right">colspan 7</td>
            <td colspan="3">colspan 3</td>
        </tr>
    </tfoot>
</table>

在Chrome和Firefox中，表格如下所示：

但在IE9中，它看起来像这样：

如何对齐IE9的页脚列？

jsFiddle