Jquery 试图；同步“；2个html表格（应用列宽）

我有两个表：表1（“标题表”，它只有一行和表列）-和表2（“数据表”，它有几行和所有数据）

表1为大多数列指定了宽度。 我现在尝试将表1中的列宽应用到表2的第一行 （表1的宽度与表2相同）

我的代码是：

var tr1 = $("tr",tblHeader).eq(0); // 1st row from header-table
var tr2 = $("tr",tblData).eq(0);   // 1st row from data-table
var td2 = $("td",tr2);             // all cells from data-table

$('td',tr1).each(function(i)       
{
    var td1 = $(this);                // table1 column header-cell
    var width = (td1.css('width'));   // column-width from header-table
    td1.css('width',width+"px");      // apply width to header-table-cell
    td2.eq(i).css('width',wi+"px");   // apply width to data-table-cell
});

问题：
在我的css中设置td padding时，比如：

table td{padding:0px；}

一切都很好（两个表的列宽相同）。 但是，一旦我将padding更改为类似于

表td{padding:2px；padding left:4px；padding right:4px；}

的内容，数据表就会出错。当使用firebug检查列宽时，所有列的宽度都相同（表1+表2），但它们看起来仍然不同。

---

有什么不对劲吗？

为什么不一张桌子，像这样：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mike</td>
            <td>26</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>27</td>
            <td>Great Britain</td>
        </tr>
        <tr>
            <td>Hans</td>
            <td>26</td>
            <td>Germany</td>
        </tr>
    </tbody>
</table>

名称
年龄
国家
迈克
26
美国
彼得
27
大不列颠
汉斯
26
德国

您可能最好使用

.outerWidth（）

来获取表格单元格的当前宽度，但由于“边框折叠”行为，这仍然很棘手。您可能希望使用两个表格的原因（像我一样）是希望标题在适当的位置，而正文可以滚动。谷歌文档使用两个表来实现这种效果，并以某种方式将它们同步起来。