Dynamische Breite der Tabelle wie in der Spalte

Question

Ich habe eine Tabelle, die Daten aus dynamischem Inhalt anzeigen, ich möchte Tabelle Breite 100% machen, wenn es 6 Spalten gibt. und Tabelle Breite Auto wenn weniger die 5 Spalten.

Ich versuchte mit CSS, aber wenn es nur zwei Spalten gibt, erweitert es zwei Spalten auf die volle Breite, während Tabelle 100% Breite und sieht umständlich aus.

Gibt es Javascript, jQuery-Skript verfügbar, um dieses Ergebnis zu erhalten?

Answer 1

Verwenden Sie jQuery und stellen Sie sicher, dass Sie die erste Zeile im Tabellenkörper auswählen, falls das thead ein anderes Layout hat.

function setTableWidth(tableId) { 

    var $tbl = $('#'+tableId); 
    var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto'; 
    $tbl.width(newWidth) 

} 

Answer 2

Je nachdem, wie Sie den dynamischen Inhalt einlegen, könnte es einen einfacheren Weg geben, aber diese Funktion sollte das tun, was Sie brauchen:

function setTableWidth(tableId) { 
    myTable = document.getElementById('tableId'); 
    if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5) 
     myTable.style.width = '100%'; 
    else 
     myTable.style.width = 'auto'; 
} 

Beachten Sie aber, dass es nicht, wenn eine der funktioniert Die Zellen in der ersten Reihe haben einen Colspan. Es zählt einfach die Anzahl der Spalten in der ersten Zeile und legt die Breite darauf fest.