如何获得真正的宽度td表

Question

我在html中创建了一个表，此table宽度为988像素，tr宽度为100％table宽度。

在表标记中存在5个td标记，此td标记宽度为20％。

当我使用jQuery（td标签）获取这些标签时，请在控制台中显示：

198 
197 
198 
197 
198

但是我在控制台 197.59 中看到了这个标签宽度。

我希望得到的这个值不是197或198。

Answer 1

比element.offsetWidth更精确：

element.getBoundingClientRect().width

它显示浏览器呈现的精确宽度。

MDN参考：getBoundingClientRect

Answer 2

当显示规格时，浏览器不会将分数像素用作单位。最小的单位是它们的整个像素。

为什么？

设置具有position:relative CSS属性的元素。相对于整个文档，元素将被定位在一些非常精确的值，但是这些值在像素单位处向上舍入，因为对每个定位值显示left:145.21542258854755124554px是没有意义的。

您可以在拖动元素并跟踪其实际位置时看到这些值。

---

但是： Browsers still read fractional pixels 。 （ W3C ）

注意：在演示中，如果放大得足够近，那么会在两个彩色div元素之间看到差异，即使有一个 0.4px 差异。

放大400％ - 0.4px差异：

Live Demo

输出：

196px 195px 195px 195px 195px

---

HTML

<table>
    <tbody>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody>
</table>
<div id="output"></div>
<div id="int">a</div>
<div id="float">a</div>

的JavaScript

var tds = document.getElementsByTagName('td');


for (var td in tds) {
    if (tds[td].nodeType == 1) 
        document.getElementById('output').innerHTML += parseFloat(tds[td].offsetWidth,10) + "px";
}

CSS

table {
    width: 988px;
    padding:0;
    margin:0;
}
tr {
    width:100%;
    padding:0;
    margin:0;
}
td {
    width:20%;
    padding:0;
    margin:0;
}
#int {
    width:21px;
    background-color:red;
}  
#float {
    width:21.4px;
    background-color:blue;
}

Answer 3

问题是，页面是如何呈现它们的，所以这就是jQuery将报告的内容。您不能拥有.59的像素，因此它会生成<td>以舍入为整数，导致它们与您所看到的像素不同。您可以考虑将它们全部添加并平均它们吗？否则，请查看DOM报告的内容。

Answer 4

var tblW = parseInt($('table').css('width'), 10);
var tdW = new Number(0.20);
var pxtdW =  tblW * tdW;
alert(pxtdW);