Setting width of table element not working in Javascript

I have a two-dimensional data grid where I have a header row in one table and multiple lines of data in a table directly underneath (they need to be in separate tables). I need the width of a header element to adjust itself to the width of the data element if the data element is wider, and the width of the data element to adjust itself to the width of the header element if the header element is wider. Problem is, it’s not setting the widths correctly.

This routine is run after the table is loaded:

var headtbl = document.getElementById("HeadTbl");
var bodytbl = document.getElementById("BodyTbl");
alert(headtbl.rows[0].cells[0].offsetWidth + " AND " + bodytbl.rows[0].cells[0].offsetWidth); // THIS RETURNS "**8 AND 17**"
headtbl.rows[0].cells[0].style.width = "17px"; // HARD-CODED THIS FOR DEMO PURPOSES
alert(headtbl.rows[0].cells[0].offsetWidth); // THIS RETURNS **21**!!  And, obviously, the data grid is thrown off
  1. I am using a valid DOCTYPE (not quirks mode)
  2. No other stylesheets are coming into play
  3. No styles are being defined in the TABLE/TR/TD elements
  4. I also tried .style.setProperty and .setAttribute definitions, both with and without “important”
  5. Use of THEAD/TBODY/TH elements makes no difference

I’ve searched online and haven’t found this particular issue addressed. Can someone assist, please?