Colspan alle Spalten

Question

Wie kann ich angeben, dass ein td-Tag alle Spalten umfassen soll (wenn die genaue Anzahl der Spalten in der Tabelle variabel/schwer zu bestimmen ist, wenn der HTML-Code gerendert wird)? w3schools erwähnt, dass Sie colspan="0" verwenden können, sagt aber nicht genau, welche Browser diesen Wert unterstützen (IE 6 steht auf unserer Liste der zu unterstützenden Browser).

Es scheint, dass das Festlegen von colspan auf einen Wert größer als die theoretische Anzahl der Spalten, die Sie haben können, funktioniert, aber nicht, wenn Sie table-layout auf fixed setzen. Gibt es Nachteile bei der Verwendung eines automatischen Layouts mit einer großen Anzahl für colspan? Gibt es eine korrektere Möglichkeit, dies zu tun?

Answer 1

Wenn Sie jQuery verwenden (oder es nicht ausmacht, es hinzuzufügen), erledigt dies die Aufgabe besser als alle diese Hacks.

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { 
            maxCol = colCount; 
        }
    });

    return maxCol;
}

Um die Implementierung zu erleichtern, dekoriere ich jeden td/th, den ich anpassen muss, mit einer Klasse wie z.B. "maxCol", dann kann ich folgendes tun:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

Sollten Sie eine Implementierung finden, für die dies nicht funktioniert, reklamieren Sie nicht, sondern erklären es in den Kommentaren und ich werde es aktualisieren, falls es abgedeckt werden kann.

Answer 2

Ein weiterer funktionierender, aber hässlicher Lösungsansatz: colspan="100", wobei 100 ein Wert größer als die insgesamt erforderlichen Spalten ist, die Sie mit colspan benötigen.

Laut W3C ist die Option colspan="0" nur mit dem COLGROUP Tag gültig.

Answer 3

Einfach colspan auf die Anzahl der Spalten in der Tabelle setzen.

Alle anderen "Abkürzungen" haben Nachteile.

Das Beste ist, colspan von Anfang an auf die richtige Anzahl zu setzen. Wenn Ihre Tabelle 5 Spalten hat, setzen Sie es auf colspan="5". Das ist der einzige Weg, der in allen Szenarien funktioniert. Nein, es ist keine veraltete Lösung oder nur für IE6 empfohlen oder so - das ist buchstäblich der beste Weg, damit umzugehen.

Ich würde nicht empfehlen, Javascript zu verwenden, um dies zu lösen, es sei denn, die Anzahl der Spalten ändert sich während der Laufzeit.

Wenn die Anzahl der Spalten variabel ist, müssen Sie die Anzahl der Spalten berechnen, um das colspan ausfüllen zu können. Wenn Sie eine variable Anzahl von Spalten haben, sollte das, was die Tabelle generiert, auch angepasst werden können, um die Anzahl der Spalten der Tabelle zu berechnen.

Wie andere Antworten bereits erwähnt haben, können Sie, wenn Ihre Tabelle nicht auf table-layout: fixed festgelegt ist, auch colspan auf eine sehr große Zahl setzen. Aber ich finde diese Lösung unordentlich und es kann Kopfschmerzen bereiten, wenn Sie später zurückkommen und entscheiden, dass es eine feste Tabellenstruktur haben sollte. Besser ist es, es beim ersten Mal richtig zu machen.

Answer 4

Im Folgenden finden Sie eine prägnante ES6-Lösung (ähnlich wie Rainbabba's Antwort, jedoch ohne jQuery).

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
    let table = td;
    while (table && table.nodeName !== 'TABLE') table = table.parentNode;
    td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});

html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}

      Header 1
      Header 2
      Header 3
      Header 4
      Header 5
      Header 6

      td wird auf volle Breite eingestellt

Answer 5

Ein CSS-Lösung wäre ideal, aber ich konnte keine finden, deshalb hier eine JavaScript-Lösung: für ein tr Element mit einer bestimmten Klasse maximieren Sie es, indem Sie eine vollständige Zeile auswählen, die Anzahl der td Elemente und ihre colSpan Attribute zählen und dann die verbreiterte Reihe mit el.colSpan = newcolspan; setzen. So...

var headertablerows = document.getElementsByClassName('max-col-span');

[].forEach.call(headertablerows, function (headertablerow) {
    var colspan = 0;
    [].forEach.call(headertablerow.nextElementSibling.children, function (child) {
        colspan += child.colSpan ? parseInt(child.colSpan, 10) : 1;
    });

    headertablerow.children[0].colSpan = colspan;
});

html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}

      1 - max Breite

      2 - keine Colspan

      3 - Colspan ist 2

Sie müssen dies möglicherweise anpassen, wenn Sie Tabellen headers verwenden, aber dies sollte einen Proof-of-Concept-Ansatz liefern, der 100% rein auf JavaScript basiert.