html - colgroup で IE9 がスパンされた列を正しくレンダリングしない

Question

3 つのテーブルに分割されたグリッドがあります。ヘッダー、コンテンツ、フッター。colgroup は、JavaScript を介して他のテーブルにコピーされるだけです。フッターには、またがる 2 つの列しかないはずです。

<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 のフッター列を揃えるにはどうすればよいですか?

jsフィドル