•  29-08-2019
  •  | 
  •  

Frage

Wie kann ich einen td Tag angeben soll alle Spalten erstrecken (wenn die genaue Anzahl der Spalten in der Tabelle wird variabel / schwierig sein, zu bestimmen, wann die HTML gerendert wird)? w3schools erwähnt Sie colspan="0" verwenden können, aber es nicht genau sagen, was diesen Wert Browser unterstützen (IE 6 ist in unserer Liste Unterstützung).

Es scheint, dass colspan auf einen Wert größer als die theoretische Menge von Spalten einstellen Sie haben können funktionieren, aber es wird nicht funktionieren, wenn Sie table-layout haben auf fixed. Gibt es Nachteile ein automatisches Layout mit vielen für colspan zu verwenden? Gibt es eine richtige Art und Weise, dies zu tun?

War es hilfreich?

Lösung

Ich habe IE 7.0, Firefox 3.0 und Chrome 1.0

Die colspan = "0" Attribut in einem TD ist NICHT Spanning über alle TDs in eine der oben genannten Browser .

Vielleicht nicht als richtige Markup Praxis empfohlen, aber wenn Sie geben einen höheren colspan Wert als die Gesamt möglich nicht. von Spalten in anderen Reihen , dann würde das TD alle Spalten erstrecken.

Das funktioniert nicht, wenn die Tisch-Layout CSS-Eigenschaft auf Fest eingestellt ist.

Noch einmal, dies ist nicht die perfekte Lösung scheint aber in den oben genannten drei Browser-Versionen zu arbeiten, wenn der Tisch-Layout CSS-Eigenschaft ist automatische . Hoffe, das hilft.

Andere Tipps

Verwenden Sie einfach diese: 

colspan="100%"

Es funktioniert auf Firefox 3.6, IE 7 und Opera 11! (Und ich denke, auf andere, konnte ich nicht versuchen)

Achtung: wie unten in den Kommentaren erwähnt, ist dies eigentlich das gleiche wie colspan="100". Daher wird diese Lösung für Tabellen mit CSS table-layout: fixed brechen, oder mehr als 100 Spalten.

Wenn Sie eine ‚title‘ Zelle machen wollen, die alle Spalten überspannt, als Header für Ihren Tisch, können Sie die Beschriftung Tag verwenden möchten ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) dieses Element für diesen Zweck bestimmt . Es verhält sich wie ein div, aber nicht die gesamte Breite des Mutter des Tisches erstrecken (wie ein div in der gleichen Position tun würde (nicht versuchen, dies zu Hause!)), Sondern erstreckt sich über sie die Breite der Tabelle. Es gibt einige Cross-Browser Probleme mit Grenzen und so (war akzeptabel für mich). Wie auch immer, man kann es als eine Zelle aussehen lassen, die alle Spalten erstreckt. Innerhalb können Sie Zeilen machen von div-Elemente hinzuzufügen. Ich bin mir nicht sicher, ob Sie es in zwischen tr-Elemente einfügen können, aber das wäre ein Hack Ich denke, (also nicht empfohlen). Eine andere Möglichkeit wäre mit Floating divs werden rumgespielt, aber das ist igitt!

Do 

<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>

Für IE 6, sollten Sie gleich colspan auf die Anzahl der Spalten in der Tabelle. Wenn Sie 5 Spalten haben, dann werden Sie wollen. colspan="5"

Der Grund dafür ist, dass IE behandelt colspans anders, es verwendet die HTML 3.2-Spezifikation:

  

IE die HTML 3.2 Definition implementiert, setzt colspan=0 als colspan=1.

Der Fehler ist gut dokumentiert .

Wenn Sie mit jQuery (oder nichts dagegen Zugabe), das die Arbeit erledigt besser als jeder dieser Hacks erhalten. 

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 Umsetzung zu erleichtern, dekoriere ich jede td / th ich mit einer Klasse angepasst müssen 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 dies für nicht, die Antwort nicht zuzuschlagen, in den Kommentaren erklärt, und ich werde aktualisieren, wenn es abgedeckt werden kann.

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

tl; dr Version:

colspan="0" funktioniert nicht in jedem Browser zu löschen. W3Schools ist falsch (wie üblich). HTML 4 sagte, dass colspan="0" eine Spalte verursachen soll die gesamte Tabelle zu überbrücken, aber niemand realisiert dies, und es wurde von der Spezifikation nach HTML 4 entfernt.

Einige weitere Details und Beweise:

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

    Hier ist eine Demo zeigt dies; versuchen Sie es auf jedem Browser Sie möchten. 

    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 Strom zurück, wenn diese Frage gestellt wurde) hat in der tat sagen, dass colspan="0" als quer durch alle Spalten behandelt werden soll:

      

    Der Wert Null ( „0“) bedeutet, dass die Zelle alle Spalten aus der aktuellen Spalte zur letzten Spalte der Spaltengruppe umspannt (COLGROUP), in der die Zelle definiert ist.

    Allerdings sind die meisten Browser dies nie umgesetzt.

  • HTML 5.0 (hergestellt zurück im Jahr 2012 eine Candidate Recommendation), den WHATWG HTML Lebensstandard (der dominierende Standard heute) und die W3 HTML 5-Spezifikation neuesten alle von HTML 4 oben zitierte nicht den Wortlaut enthalten, und sich einig, dass ein colspan von 0 nicht erlaubt ist, mit dieser Formulierung, die in allen drei Spezifikationen erscheint:

      

    Die td und th Elemente können ein colspan Inhaltsattribut angegeben haben, dessen Wert eine gültige nicht negative ganze Zahl größer als Null ...

    Quellen:

  • Die folgenden Ansprüche von der Seite W3Schools in der Frage verknüpft sind - zumindest heute - völlig falsch:

      

    Nur unterstützt Firefox colspan = „0“, die eine besondere Bedeutung hat ... [Es] teilt den Browser in der Zelle der letzten Spalte der Spaltengruppe (colgroup)

    zu überspannen

    und

      

    Unterschiede zwischen HTML 4.01 und HTML5

         

    NONE.

    Wenn Sie nicht bereits bewusst, dass W3Schools allgemein in Verachtung von Web-Entwickler für seine häufigen Ungenauigkeiten gehalten wird, betrachtet dies als eine Lektion in warum.

Ein weiterer Arbeits aber hässliche Lösung. colspan="100", wobei 100 einen Wert größer als Gesamt Spalten Sie müssen colspan

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

Ich will nur meine Erfahrung hinzufügen und auf diese antworten.
. Hinweis: Es funktioniert nur, wenn Sie eine vordefinierte table und tr mit ths, sondern laden in Ihren Reihen (zum Beispiel über AJAX) dynamisch

In diesem Fall können Sie die Anzahl der th gräflichen es in Ihrem ersten Kopfzeile sind, und verwenden, die die gesamte Spalte zu überspannen.

Dies kann erforderlich sein, wenn Sie eine Nachricht weiterleiten darf, wenn keine Ergebnisse gefunden.

So etwas wie dies in jQuery, wo table ist Ihre Eingabe-Tabelle: 

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 gerade Denker, aber ich bin ein wenig verwirrt, nicht Sie die Spaltennummer der Tabelle wissen?

Übrigens IE6 ehren nicht den colspan = „0“, mit oder ohne colgroup definiert. Ich habe auch versucht Thead zu verwenden und Th die Gruppen von Spalten zu erzeugen, aber der Browser recognlise nicht die Form colspan = „0“.

Ich habe versucht, mit Firefox 3.0 auf Windows und Linux und es funktioniert nur mit einer strengen doctype.

Sie können prüfen, einen Test auf mehrere Bowser bei

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

ich die Testseite finden Sie hier http: //hsivonen.iki .fi / test / WA10 / Tabellen / colspan-0.html

Bearbeiten: Kopieren und fügen Sie den Link, wird die Formatierung nicht die doppelten Protokollteile in der Verbindung annehmen (oder ich bin nicht so klug korrekt zu formatieren)

.

Ich hatte das gleiche Problem - wie ich mein Problem gelöst .. Setzen Sie alle Steuerelemente, die Sie wollen in einem td zu überspannen

versuchen "colSpan" anstelle von "colspan" verwenden. IE mag die Kamelen Version ...

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