Javascript getBoundingClientRect在计算td宽度时似乎不准确

我正在开发一个功能，它要求我在单击按钮时将CSS宽度设置为表中每个td的像素。我使用getBoundingClientRect计算td宽度并获得px（例如100px），然后将其设置为td.style.width。但是，如果已设置table.style.width，则会导致某些单元格移动，但如果未设置table.style.width，则不会发生移动。请参阅以下表格的HTML

<table id='mytable' style="border-collapse:collapse;width:300px">
  <tbody>
    <tr height="19" style="height:14.25pt">

      <td style="border:1px solid rgb(212, 212, 212);height:14.25pt;width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
    </tr>
  </tbody>
</table>

奇怪的是，我可以看到每个td的宽度是：100100100，但在应用了从

getBoundingClientRect（）.right-getBoundingClientRect（）.left

计算出的新宽度后，它变成了：98.5100.5101。这种不一致导致了转移效应

我发现，如果

width:300px

不存在于表的CSS中，它将在不移位的情况下完美地工作，但如果它已经存在，我不能仅仅移除它，因为移除它也会导致移位。因此，我想知道是否有一种方法可以做到这一点而不删除table.style.width

我创建了jsfiddle来重新编程。我想要的是在将px分配给每个td之后不要移动单元。谢谢

---

如果在CSS中将

td

elements'

box size

样式属性默认为

border box

：

td { box-sizing: border-box;}

点击小提琴上的按钮不会改变桌子的宽度

<table id='mytable' style="border-collapse:collapse;width:300px">
  <tbody>
    <tr height="19" style="height:14.25pt">

      <td style="border:1px solid rgb(212, 212, 212);height:14.25pt;width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
    </tr>
  </tbody>
</table>

---

基本上，默认情况下，表元素是通过

内容框设置的。在按钮单击中将默认值更改为
边框框
，这意味着浏览器必须使用不同的大小调整规则再次布局表格。
谢谢，这是可行的，而且默认使用
td{box size:border box；}
，似乎每列也不会移动，但是如果默认情况下没有设置此样式属性，我认为如果我们在代码中动态地设置它，它仍然会导致变化？如果默认情况下未设置框大小样式属性，则不确定是否有避免移动的方法？您可以更改CSS中
td
元素的默认框模型。如果只想更改特定类的表单元格元素，请使用类名限定规则。您还可以显式设置
box模型：边框框td
元素的style属性中的code>。提供CSS规则通常是首选，因为它将样式与内容分离。作为最后一种手段，您可以在JavaScript中创建
样式
元素，将其
文本内容
设置为CSS规则字符串，并将其附加到正文中。如果需要：）。