Come ridimensionare la larghezza delle colonne della tabella da JavaScript

Question

Ho un problema con JavaScript.
Ho un elenco di celle della tabella memorizzate su TabList.
Voglio trovare la larghezza massima e quindi impostare questa larghezza su tutti.
Un codice di esempio è qui, ma l'impostazione della larghezza non funziona.

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

Ho commentato i miei tentativi ..
Qualsiasi aiuto?
Questo non ha fatto il trucco per me ..

Aggiornamento:
Sono sicuro che TabList è un elenco di celle perché stavo controllando className.
Sto eseguendo il ciclo continuo fino a TabList.length-1, perché voglio che l'ultima cella riempia il resto della larghezza della tabella.

Answer 1

Suggerirei di rimuovere tutti i CSS / styling dalla pagina e testarlo per isolare il problema. Cose come questa sono spesso complicate da CSS.

Answer 2

Se si imposta la larghezza dell'intera tabella su --i * MaxTabWidth. Distribuirebbe uniformemente le colonne? Supponiamo che la tua tabella sia denominata myTable.

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

Modifica: inoltre non

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

salta l'ultima colonna fermandoti su TabList.length-2?

Answer 3

Per quello che vale, in jQuery questo può essere fatto con il seguente script in cui la tua tabella ha l'id di " myTable " ;. Se hai abbastanza controllo sull'ambiente da aggiungere in un framework, lo consiglio vivamente perché rende le attività come queste molto più facili.

    var maxWidth = 0;

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