Colspan alle Spalten

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

Es scheint , diese Einstellung colspanauf einen Wert größer als die theoretische Menge von Spalten , die Sie arbeiten werden, aber es wird nicht funktionieren , wenn Sie table-layoutauf fixed. Gibt es irgendwelche Nachteile bei der Verwendung eines automatischen Layouts mit einer großen Anzahl für colspan? Gibt es einen korrekteren Weg, dies zu tun?

Ich habe IE 7.0, Firefox 3.0 und Chrome 1.0

Das Attribut colspan = "0" in einem TD erstreckt sich NICHT über alle TDs in einem der oben genannten Browser .

Möglicherweise nicht als richtige Markup-Übung empfohlen, aber wenn Sie einen höheren Colspan-Wert als den insgesamt möglichen Nein-Wert angeben. von Spalten in anderen Zeilen würde dann der TD alle Spalten überspannen.

Dies funktioniert NICHT, wenn die CSS-Eigenschaft für das Tabellenlayout auf "fest" gesetzt ist.

Dies ist wiederum nicht die perfekte Lösung, scheint jedoch in den oben genannten 3 Browserversionen zu funktionieren, wenn die CSS-Eigenschaft für das Tabellenlayout automatisch ist . Hoffe das hilft.

Verwenden Sie einfach dies:

colspan="100%"

Es funktioniert unter Firefox 3.6, IE 7 und Opera 11! (und ich denke bei anderen konnte ich es nicht versuchen)

Warnung: Wie in den Kommentaren unten erwähnt, ist dies tatsächlich dasselbe wie colspan="100". Daher wird diese Lösung für Tabellen mit CSS table-layout: fixedoder mehr als 100 Spalten unterbrochen .

Wenn Sie als Titel für Ihre Tabelle eine Titelzelle erstellen möchten, die alle Spalten umfasst, können Sie das Untertitel-Tag ( http://www.w3schools.com/tags/tag_caption.asp / https: //) verwenden developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Dieses Element ist für diesen Zweck gedacht. Es verhält sich wie ein Div, erstreckt sich jedoch nicht über die gesamte Breite des übergeordneten Tisches der Tabelle (wie es ein Div an derselben Position tun würde (versuchen Sie dies nicht zu Hause!)), Sondern über die gesamte Breite des Tabelle. Es gibt einige browserübergreifende Probleme mit Rahmen und dergleichen (war für mich akzeptabel). Wie auch immer, Sie können es als eine Zelle aussehen lassen, die alle Spalten umfasst. Innerhalb können Sie Zeilen erstellen, indem Sie div-Elemente hinzufügen. Ich bin mir nicht sicher, ob Sie es zwischen tr-Elementen einfügen können, aber das wäre ein Hack, denke ich (also nicht empfohlen). Eine andere Möglichkeit wäre, mit schwebenden Divs herumzuspielen, aber das ist igitt!

Tun

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Tu es nicht

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

Als Teilantwort hier ein paar Punkte colspan="0", die in der Frage erwähnt wurden.

tl; dr version:

colspan="0"funktioniert in keinem Browser. W3Schools ist falsch (wie üblich). HTML 4 sagte, colspan="0"dass eine Spalte die gesamte Tabelle überspannen sollte, aber niemand hat dies implementiert und es wurde nach HTML 4 aus der Spezifikation entfernt.

Einige weitere Details und Beweise:

• Alle gängigen Browser behandeln es als gleichwertig mit colspan="1".

  Hier ist eine Demo, die dies zeigt. Probieren Sie es in einem beliebigen Browser aus.

  td {
    border: 1px solid black;
  }

  <table>
    <tr>
      <td>ay</td>
      <td>bee</td>
      <td>see</td>
    </tr>
    <tr>
      <td colspan="0">colspan="0"</td>
    </tr>
    <tr>
      <td colspan="1">colspan="1"</td>
    </tr>
    <tr>
      <td colspan="3">colspan="3"</td>
    </tr>
    <tr>
      <td colspan="1000">colspan="1000"</td>
    </tr>
  </table>

  Führen Sie das Code-Snippet ausErgebnisse ausblenden

  Erweitern Sie das Snippet

• Die HTML 4-Spezifikation (jetzt alt und veraltet, aber aktuell, als diese Frage gestellt wurde) sagte tatsächlich, dass colspan="0"dies so behandelt werden sollte , dass es alle Spalten umfasst:

  Der Wert Null ("0") bedeutet, dass die Zelle alle Spalten von der aktuellen Spalte bis zur letzten Spalte der Spaltengruppe (COLGROUP) umfasst, in der die Zelle definiert ist.

  Die meisten Browser haben dies jedoch nie implementiert.

• HTML 5.0 (eine Empfehlung von Kandidaten aus dem Jahr 2012), der WhatWG HTML-Lebensstandard (der heute vorherrschende Standard) und die neueste W3 HTML 5-Spezifikation enthalten nicht den oben in HTML 4 zitierten Wortlaut und stimmen einstimmig zu, dass a colspan0 ist ist nicht erlaubt, mit diesem Wortlaut, der in allen drei Spezifikationen vorkommt:

  Für die Elemente tdund thkann ein colspanInhaltsattribut angegeben werden, dessen Wert eine gültige nicht negative Ganzzahl größer als Null sein muss ...

  Quellen:

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements

• Die folgenden Behauptungen der in der Frage verlinkten W3Schools-Seite sind - zumindest heutzutage - völlig falsch:

  Nur Firefox unterstützt colspan = "0", was eine besondere Bedeutung hat ... [Es] weist den Browser an, die Zelle bis zur letzten Spalte der Spaltengruppe (colgroup) zu überspannen.

  und

  Unterschiede zwischen HTML 4.01 und HTML5

  KEINER.

  Wenn Sie nicht bereits wissen, dass W3Schools von Webentwicklern wegen ihrer häufigen Ungenauigkeiten im Allgemeinen verachtet wird, sollten Sie dies als eine Lektion in Bezug auf das Warum betrachten.

Für IE 6 möchten Sie colspan der Anzahl der Spalten in Ihrer Tabelle entsprechen. Wenn Sie 5 Spalten haben, möchten Sie : colspan="5".

Der Grund dafür ist, dass der IE Colspans unterschiedlich behandelt und die HTML 3.2-Spezifikation verwendet:

IE implementiert die HTML 3.2-Definition, die colspan=0als festgelegt wird colspan=1.

Der Fehler ist gut dokumentiert .

Wenn Sie jQuery verwenden (oder nichts dagegen haben, es hinzuzufügen), wird dies die Arbeit besser erledigen als jeder dieser 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 vereinfachen, dekoriere ich jedes td / th, das ich anpassen muss, mit einer Klasse wie "maxCol". Dann kann ich Folgendes tun:

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

Wenn Sie eine Implementierung finden, für die dies nicht funktioniert, schlagen Sie die Antwort nicht zu, erklären Sie sie in Kommentaren, und ich werde sie aktualisieren, wenn sie abgedeckt werden kann.

Eine andere funktionierende, aber hässliche Lösung: colspan="100"wobei 100 ein Wert ist, der größer ist als die Gesamtzahl der Spalten, die Sie benötigen colspan.

Laut W3C ist die colspan="0"Option nur mit COLGROUPTag gültig .

Im Folgenden finden Sie eine kurze es6-Lösung (ähnlich der Antwort von Rainbabba, 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;
}

<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
  </tr>
</thead>
<tbod><tr>
  <td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>

Ich möchte nur meine Erfahrung hinzufügen und darauf antworten.
Hinweis: Dies funktioniert nur, wenn Sie ein vordefiniertes tableund ein trmit ths haben, aber dynamisch in Ihre Zeilen geladen werden (z. B. über AJAX).

In diesem Fall können Sie die Anzahl der thin Ihrer ersten Kopfzeile vorhandenen zählen und diese verwenden, um die gesamte Spalte zu überspannen.

Dies kann erforderlich sein, wenn Sie eine Nachricht weiterleiten möchten, wenn keine Ergebnisse gefunden wurden.

So etwas in jQuery, wo tableist Ihre Eingabetabelle:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

Vielleicht bin ich ein klarer Denker, aber ich bin ein bisschen verwirrt. Kennst du nicht die Spaltennummer deiner Tabelle?

Übrigens berücksichtigt IE6 nicht das colspan = "0", mit oder ohne definierte colgroup. Ich habe auch versucht, mit thead und th die Spaltengruppen zu generieren, aber der Browser erkennt die Form colspan = "0" nicht.

Ich habe es mit Firefox 3.0 unter Windows und Linux versucht und es funktioniert nur mit einem strengen Doctype.

Sie können einen Test auf mehreren Bowsern unter überprüfen

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Ich fand die Testseite hier http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Bearbeiten: Bitte kopieren Sie den Link und fügen Sie ihn ein. Die Formatierung akzeptiert nicht die doppelten Protokollteile im Link (oder ich bin nicht so schlau, ihn richtig zu formatieren).

Entsprechend der Spezifikation colspan="0"sollte sich eine Tabellenbreite td ergeben.

Dies gilt jedoch nur, wenn Ihr Tisch eine Breite hat! Eine Tabelle kann Zeilen unterschiedlicher Breite enthalten. Der einzige Fall, in dem der Renderer die Breite der Tabelle kennt, wenn Sie eine Spaltengruppe definieren ! Andernfalls ist das Ergebnis von colspan = "0" unbestimmbar ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

Ich kann es nicht mit älteren Browsern testen, aber dies ist Teil der Spezifikation seit 4.0 ...

Versuchen Sie es mit "colSpan" anstelle von "colspan". IE mag die camelBack Version ...