jquery – 当tbody css display属性为block时,如何对齐thead和tbody中的列

我和thead,tbody和tfoot有一张桌子.
显示的css值为block – 允许向主体添加滚动条并在thead和tfoot保持原位时滚动行.
由于表格宽度根据TD的宽度而变化,因此TD标签宽度不固定.
我想将thead的TH标签与tbody的TD标签对齐.

如何才能做到这一点？
(CSS或JQuery)

编辑：
目标浏览器是谷歌 – Chrome！
并且添加了轻微的扭曲,表格是RTL.

CSS：

tbody{
    display: block;
    overflow: auto;
}

thead,tfoot{
    display: block;
}

HTML：

<table>
        <caption>My Table</caption>
        <thead>    
            <tr><th>Col1</th><th>Col2</th></tr>
        </thead>
        <tbody>    
            <tr><td>Cell11</td><td>Cell12</td></tr>
            <tr><td>Cell21</td><td>Cell22</td></tr>
            <tr><td>Cell31</td><td>Cell32</td></tr>
            <tr><td>Cell41</td><td>Cell42</td></tr>
            <tr><td>Cell51</td><td>Cell52</td></tr>
            <tr><td>Cell61 Is Wide</td><td>Cell62</td></tr>
        </tbody>
        <tfoot>
            <tr><th>6 Rows</th><th></th></tr>
        </tfoot>                
    </table>

您可以使用此jsFiddle进行尝试.

谢谢,快乐.