Colspan alle Spalten
-
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?
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
alscolspan=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
undth
Elemente können eincolspan
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 überspannenund
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.
Im Folgenden finden Sie eine kurze es6 Lösung (ähnlich Rainbabba Antwort aber ohne die 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 will nur meine Erfahrung hinzufügen und auf diese antworten.
. Hinweis: Es funktioniert nur, wenn Sie eine vordefinierte table
und tr
mit th
s, 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;
}
}
Nach der Spezifikation colspan="0"
in einer Tabellenbreite td führen sollte.
Dies ist jedoch nur der Fall, wenn Ihre Tabelle eine Breite hat! Eine Tabelle kann Reihen unterschiedlicher Breiten enthalten. Also, der einzige Fall, dass der Renderer die Breite der Tabelle weiß, wenn Sie auf definiert eine colgroup ! Andernfalls Ergebnis colspan = "0" ist unbestimmbar ...
http://www.w3.org /TR/REC-html40/struct/tables.html#adef-colspan
Ich kann es nicht testen, auf älteren Browsern, aber dies ist Teil der Spezifikation seit 4.0 ...
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 ...