Cómo cambiar el ancho de las columnas de la tabla desde JavaScript

Question

Tengo un problema con javascript.
Tengo una lista de celdas de tabla almacenadas en TabList.
Quiero encontrar el ancho máximo y luego establecer este ancho en todos ellos.
Aquí hay un código de ejemplo, pero la configuración del ancho no funciona.

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

He comentado mis intentos ...
¿Alguna ayuda?
This no hice el truco por mí ..

actualización:
Estoy seguro de que TabList es una lista de celdas porque estaba revisando el className.
Estoy en bucle hasta TabList.length-1, porque quiero que la última celda llene el resto del ancho de la tabla.

Answer 1

Le sugeriría que elimine todo el estilo / css de la página y lo pruebe para aislar el problema. Cosas como esta a menudo son complicadas por css.

Answer 2

Si establece el ancho de toda la tabla en --i * MaxTabWidth. ¿Eso distribuiría las columnas uniformemente? Supongamos que su tabla se llama myTable.

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

Editar: También no lo haría

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

omite la última columna deteniéndose en TabList.length-2?

Answer 3

Para lo que vale, en jQuery esto se puede hacer con el siguiente script donde su tabla tiene el id de " myTable " Si tiene suficiente control sobre el entorno para agregar un marco, lo recomendaría mucho, ya que hace que las tareas como estas sean mucho más fáciles.

    var maxWidth = 0;

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