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

Question

我正在开发一项功能，要求我在单击按钮时为 table 的每个 td 设置 CSS 宽度作为像素。我使用 getBoundingClientRect 来计算 td 宽度并获取 px（例如 100px），然后将其设置为 td.style.width。但是，如果已经设置了table.style.width，它会导致一些单元格移动，但如果不设置table.style.width，则不会发生移动。 table 的 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 的宽度是：100、100、100，但是在应用根据 getBoundingClientRect().right - getBoundingClientRect().left 计算的新宽度后，它变成了：98.5、100.5、101。这种不一致造成了转移效应。

我发现如果 width:300px 不存在于 table 的 CSS 中，它将完美地工作而无需移动，但如果它已经存在，我不能只删除它，因为删除它也会导致移动。所以我想知道是否有一种方法可以在不删除 table.style.width.

的情况下执行此操作

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

https://jsfiddle.net/flyingbee2012/udpeq0w9/56/

Answer 1

如果在CSS中将td个元素的box-sizing样式属性默认为border-box：

td { box-sizing: border-box;}

单击 fiddle 中的按钮不会更改 table 的宽度。

基本上 table 元素默认设置为 content-box 大小。在单击按钮时将默认值更改为 border-box 意味着浏览器必须使用不同的大小调整规则再次布局 table。

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

getBoundingClientRect seems inaccurate in calculating td width

html

javascript

css

html-table