webentwicklung-frage-antwort-db.com.de

Colspan alle Spalten

Wie kann ich angeben, dass ein td -Tag 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ähnungen, die Sie verwenden können colspan="0", aber es steht nicht genau fest, welche Browser diesen Wert unterstützen (IE 6 ist in unserer Liste enthalten).

Es scheint, als würde es funktionieren, wenn Sie colspan auf einen Wert setzen, der größer ist als die theoretische Anzahl der Spalten, die Sie möglicherweise haben. Wenn Sie table-layout auf fixed gesetzt. Gibt es irgendwelche Nachteile bei der Verwendung eines automatischen Layouts mit einer großen Zahl für colspan? Gibt es einen richtigeren Weg, dies zu tun?

352
Bob

Ich habe IE 7.0, Firefox 3.0 und Chrome 1.0

Das Attribut colspan = "0" in a TD ist NICHT übergreifend in allen TDs in einem der oben genannten Browser.

Vielleicht nicht als richtige Markup-Praxis zu empfehlen, aber wenn Sie ein höherer Spaltenwert als die insgesamt mögliche Anzahl von Spalten in anderen Zeilen angeben, würde das TD alle umfassen die Spalten.

Dies funktioniert NICHT, wenn die CSS-Eigenschaft für das Tabellenlayout auf fixed festgelegt 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.

248
Nahom Tijnam

Benutze einfach folgendes:

colspan="100%"

Es funktioniert mit 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 das gleiche wie colspan="100". Daher wird diese Lösung für Tabellen mit css table-layout: fixed oder mehr als 100 Spalten.

254
Cluxter

Wenn Sie eine 'title'-Zelle erstellen möchten, die alle Spalten umfasst, können Sie als Überschrift für Ihre Tabelle das caption-Tag verwenden ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) Dieses Element ist für diesen Zweck vorgesehen. Es verhält sich wie ein Div, erstreckt sich aber nicht über die gesamte Breite des übergeordneten Elements der Tabelle (wie es ein Div an derselben Position tun würde (versuchen Sie dies nicht zu Hause!)), Sondern über die 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 so gestalten, dass es sich um eine Zelle handelt, die alle Spalten umfasst. Innerhalb können Sie Zeilen erstellen, indem Sie div-Elemente hinzufügen. Ich bin 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!

Machen

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

Nicht

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

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

Der Grund ist, dass IE behandelt Colspans anders, es verwendet die HTML 3.2-Spezifikation:

IE implementiert die HTML 3.2-Definition und setzt colspan=0 wie colspan=1.

Der Fehler ist gut dokumentiert .

14
George Stocker

Als Teilantwort hier ein paar Punkte zu colspan="0", das in der Frage erwähnt wurde.

tl; dr version:

colspan="0" funktioniert in keinem Browser. W3Schools ist falsch (wie immer). HTML 4 sagte, dass colspan="0" sollte bewirken, dass sich eine Spalte über die gesamte Tabelle erstreckt, aber niemand hat dies implementiert und sie 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>
  • Die HTML 4-Spezifikation (jetzt alt und veraltet, aber aktuell, als diese Frage gestellt wurde) hat tatsächlich gesagt dass colspan="0" sollte so behandelt werden, als würde es sich über alle Spalten erstrecken:

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

    Die meisten Browser haben dies jedoch nie implementiert.

  • HTML 5.0 (eine Empfehlung für 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 darin überein, dass ein colspan von 0 ist nicht erlaubt, mit diesem Wortlaut, der in allen drei Spezifikationen vorkommt:

    Für die td- und th -Elemente kann ein colspan -Inhaltsattribut angegeben werden, dessen Wert eine gültige nicht negative Ganzzahl größer als Null sein muss ...

    Quellen:

  • Die folgenden Behauptungen von die in der Frage verlinkte 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 im Allgemeinen von Webentwicklern wegen seiner häufigen Ungenauigkeiten verachtet wird, sollten Sie dies als eine Lehre aus dem Grund betrachten.

11
Mark Amery

Wenn Sie jQuery verwenden (oder es Ihnen nichts ausmacht, es hinzuzufügen), wird dies die Arbeit besser erledigen als bei jedem 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 möchte, 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, erläutern Sie sie in Kommentaren und ich aktualisiere, ob sie abgedeckt werden kann.

11
rainabba

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

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

4
Raptor

Im Folgenden finden Sie eine prägnante es6-Lösung (ähnlich wie Rainbabbas 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;
}
<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>
2
Sjeiti