Frage

Ich habe eine Tabelle, die Anzeigedaten wie von Dynamic Content, ich möchte Tabelle Breite 100% machen, wenn es 6 cols ist. und Tabelle Breite auto , wenn weniger die 5 cols.

Ich habe versucht, mit CSS, aber, wenn es nur zwei Spalten ist, es zwei Spalten auf volle Breite erweitern, während Tabelle 100% Breite hat und sieht umständlich.

Gibt es eine Javascript, jQuery Skript zur Verfügung, dieses Ergebnis zu bekommen?

War es hilfreich?

Lösung

Mit jQuery und sicherzustellen, dass Sie die erste Zeile in der Tabelle Körpern im Fall wählen der 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)

 }

Andere Tipps

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 funktionieren wird, wenn eine der Zellen in der ersten Reihe ein colspan hat. Es zählt nur die Anzahl der Spalten in der ersten Reihe und die Breite auf dieser Grundlage zu setzen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top