How to resize table columns width from JavaScript

Question

I have a problem with javascript.
I have a list of table cells stored at TabList.
I want to find the maximum width, and then set this width to all of them.
A sample code is here, but the setting of the width is not working.

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";
}

I have commented my attempts..
Any help?
This didn't do the trick for me..

update:
I am sure TabList is a list of Cells because I was checking the className.
I am looping until TabList.length-1, because I want the last cell to fill the rest of the table's width.

Answer 1

I would suggest you remove all css/styling from the page and testing it to isolate the problem. Things like this are often complicated by css.

Answer 2

If you set the width of the entire table to --i*MaxTabWidth. Would that evenly distribute the columns? Suppose your table is named myTable.

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

Edit: Also wouldn't

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

skip the last column by stopping at TabList.length-2?