Установка ширины элемента таблицы не работает в Javascript ⇐ CSS

[Anonymous]

У меня есть двумерная сетка данных, в которой есть строка заголовка в одной таблице и несколько строк данных в таблице непосредственно под ней (они должны находиться в отдельных таблицах). Мне нужно, чтобы ширина элемента заголовка подстраивалась под ширину элемента данных, если элемент данных шире, а ширина элемента данных подстраивалась под ширину элемента заголовка, если элемент заголовка шире. Проблема в том, что ширина задана неправильно.
Эта процедура запускается после загрузки таблицы:

Код: Выделить всё

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

• Я использую действительный DOCTYPE (не режим совместимости)
• Никакие другие таблицы стилей не используются
  В элементах TABLE/TR/TD не определяются стили.
• Я также пробовал определения .style.setProperty и .setAttribute, как с «важным», так и без него. "
• Использование элементов THEAD/TBODY/TH не имеет значения

Я искал в Интернете и не нашел Я не нашел решения этой конкретной проблемы. Может ли кто-нибудь помочь, пожалуйста?
РЕДАКТИРОВАТЬ:
Вот код, сокращенный до абсолютного минимума, необходимого для демонстрации проблемы:

Код: Выделить всё

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!
}

Код: Выделить всё

Author




Shakespeare

Подробнее здесь: https://stackoverflow.com/questions/786 ... javascript