Dynamische Breite der Tabelle als pro Spalte
-
10-07-2019 - |
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?
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.