javascript - 使用 jQuery 获取元素的精确精确宽度

Question

我有两个表格行（不在同一个表格中），我一直在尝试设置 row1 中每个表格单元格（td）的宽度 = row2 中每个表格单元格的宽度，但结果每次 row1 都短一点比row2，当我使用alert检查所有表格单元格的各自值时，我得到了一个好的结果，然后我使用firebug检查了这两个元素，结果证明，例如，将表格单元格值设置为53px，计算值为 53.2167px，而 row1 中其他相应表格单元格的计算宽度仅为 53px ，我想这就是所有不同之处。有什么方法可以使用 jQuery 获得准确的值（53.2167px）？

Answer 1

在您的环境中执行此操作应该可以为标题表格单元格与内容设置正确的宽度。

例子

HTML

<table id="theHeader">
    <thead>
        <tr>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
        </tr>
    </thead>
</table>

<table id="theContent">
    <tbody>
        <tr>
            <td>Testing</td>
            <td>Testing</td>
            <td>Testing</td>
            <td>Testing</td>
        </tr>
    </tbody>
</table>

jQuery

var headerColumns = $('#theHeader thead tr:first-child th');
var contentColumns = $('#theContent tbody tr:first-child td');

for(i=0; i<contentColumns.length; i++){
    $(headerColumns[i]).css('width',$(contentColumns[i]).width()+'px');
}​

jsFiddle

http://jsfiddle.net/xWbhM/