Как изменить размер столбцов таблицы с помощью JavaScript

Question

У меня проблема с javascript.
У меня есть список ячеек таблицы, хранящийся в TabList.
Я хочу найти максимальную ширину, а затем установить эту ширину для всех них.
Пример кода находится здесь, но настройка ширины не работает.

var MaxTabWidth = 0;
for (var i = 0; i < TabList.length-1; i++)
{
  if (TabList[i].offsetWidth>MaxTabWidth) 
    MaxTabWidth = TabList[i].offsetWidth;
}

for (var i = 0; i < TabList.length-1; i++)
{
  TabList[i].style.width = MaxTabWidth+"px";
  // TabList[i].width = MaxTabWidth+"px";
  // TabList[i].offsetWidth = MaxTabWidth+"px";
}

Я прокомментировал свои попытки..
Любая помощь?
Этотмне не помогло..

обновлять:
Я уверен, что TabList — это список ячеек, потому что я проверял имя класса.
Я выполняю цикл до TabList.length-1, потому что хочу, чтобы последняя ячейка заполняла остальную ширину таблицы.

Answer 1

Я бы посоветовал вам удалить все CSS/стили со страницы и протестировать их, чтобы изолировать проблему.Подобные вещи часто усложняются CSS.

Answer 2

Если вы установите ширину всей таблицы равной --i*MaxTabWidth.Будет ли это равномерно распределять столбцы?Предположим, ваша таблица называется myTable.

document.getElementById('myTable').width = new String(--i*MaxTabWidth)

Редактировать:Также не стал бы

for (var i = 0; i < TabList.length-1; i++)

пропустить последний столбец, остановившись на TabList.length-2?

Answer 3

Что бы это ни стоило, в jQuery это можно сделать с помощью следующего скрипта, где ваша таблица имеет идентификатор «myTable».Если у вас есть достаточный контроль над средой, чтобы добавить ее в фреймворк, я настоятельно рекомендую это, поскольку это значительно упрощает подобные задачи.

    var maxWidth = 0;

    $("#myTable td").each(function() {
        if ($(this).width() > maxWidth) {
            maxWidth = $(this).width();
        }
    });
    $("#myTable td").width(maxWidth);