html - 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