JavaScript中设置表格元素宽度失效问题求助

我有一个二维数据网格，表头行位于单独的表格中，多行数据则放在下方另一个独立表格内。需求是：若数据单元格更宽，表头单元格需适配其宽度；若表头单元格更宽，数据单元格需适配表头宽度。但实际设置宽度时出现异常：

表格加载后执行以下代码：

var headtbl = document.getElementById("HeadTbl");
var bodytbl = document.getElementById("BodyTbl");
alert(headtbl.rows[0].cells[0].offsetWidth + " AND " + bodytbl.rows[0].cells[0].offsetWidth); // 返回*8 AND 17*
headtbl.rows[0].cells[0].style.width = "17px"; // 为演示硬编码
alert(headtbl.rows[0].cells[0].offsetWidth); // 返回*21*，导致网格布局错乱

已排查的情况：

• 使用了有效的DOCTYPE（非怪异模式）
• 无其他样式表影响
• TABLE/TR/TD元素未定义样式
• 尝试过.style.setProperty和setAttribute方法，含/不含!important
• 使用THEAD/TBODY/TH元素无改善

未在网上找到对应解决方案，特此求助。

补充：最小复现代码 #

JavaScript #

function formatGrid() {
  var headtbl = document.getElementById("HeadTbl");
  var bodytbl = document.getElementById("BodyTbl");
  alert(headtbl.rows[0].cells[0].offsetWidth + " AND " + bodytbl.rows[0].cells[0].offsetWidth); // 49 and 84
  headtbl.rows[0].cells[0].width = "84px";
  alert(headtbl.rows[0].cells[0].offsetWidth); // 返回*88!*
}

HTML #

<!DOCTYPE html>
<html>

<head>
</head>

<body onLoad="formatGrid()">
  <table id="HeadTbl" border="1">
    <tr>
      <td>Author</td>
    </tr>
  </table>
  <table id="BodyTbl" border="1">
    <tr>
      <td>Shakespeare</td>
    </tr>
  </table>
</body>

</html>

内容的提问来源于stack exchange，提问作者Steady Eddie