Cómo cambiar el ancho de las columnas de la tabla desde JavaScript
-
03-07-2019 - |
Pregunta
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.
Solución
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.
Otros consejos
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?
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);