DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft border-collapse wird für <table> -Elemente verwendet (oder für Elemente, die sich wie eine Tabelle verhalten sollen, über display: table oder display: inline-table).
Syntax
border-collapse: collapse | separate;- Anfangswert:
separate - Gilt für:
tableundinline-table-Elemente - Vererbt: ja
- Berechneter Wert: wie angegeben
- Animationstyp: diskret
Werte
/* Keyword values */
border-collapse: collapse;
border-collapse: separate;
/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;separate(Standard) – bei dem jede Tabellenzelle ihre eigenen unabhängigen Ränder hat und es auch einen Abstand zwischen diesen Zellen geben kann.collapse– bei dem sowohl der Abstand als auch die Ränder zwischen den Tabellenzellen kollabieren, sodass nur ein Rand und kein Abstand zwischen den Zellen vorhanden ist.
Wenn border-collapse auf collapse gesetzt ist, ist es bemerkenswert, dass Eigenschaften wie border-spacing und border-radius (auf tatsächlichen Rändern) keine Wirkung haben. Sie benötigen border-collapse: separate;, wenn Sie eine dieser beiden Eigenschaften benötigen.
Hier ist ein Beispiel, bei dem Sie zwischen den beiden wechseln können
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja | Ja |
su
Sie schrieben
/* Oder nichts tun, das ist Standard */ bei beiden CSS-Beispielen
Habe ich nicht verstanden.
Simon, der Standard ist "separate" – ignorieren Sie den /* Kommentar */
Welche Bibliothek verwenden Sie für die Sortierbefehle? So ähnlich wie ul>li
Einfache, aber sehr nützliche Sache für die Arbeit mit Tabellen. Übrigens, schöne Idee mit diesem Almanach :)
Ich habe das verwendet und es tat genau das, was ich gesucht hatte, um ein IE9-Problem zu beheben, aber es hat meinen box-shadow entfernt. Haben Sie eine Idee, wie ich das Beste aus beidem herausholen kann?
Danke!
Kiefer
@email to fax: Ihre Frage ist nicht themenbezogen.
Übrigens möchten Sie vielleicht in Erwägung ziehen, position: absolute von den Elementen zu entfernen.
Hallo,
Ich benutze #wrap { display:table;border-collapse: collapse; border:1px solid #cccc},
Wie kann ich also erreichen, dass der Rand vollständig ist?
Ich habe ein jsfiddle mit meinem vollständigen Code erstellt (außer den Bildern). http://jsfiddle.net/qHVk3/
Vielen Dank
Also versteckt border-collapse mehr oder weniger den oberen Rand… was bedeutet, dass Sie, wenn Sie eine Zeile durch Ändern der Randfarben "hervorheben" möchten, den unteren Rand sowohl der hervorzuhebenden Zeile als auch der vorherigen Zeile ändern müssen… was leider CSS ausschließt, um dies zu erreichen… zumindest bis jetzt, bis '!' zu modernen Browsern hinzugefügt wird.
Tatsächlich habe ich den Hervorhebungseffekt mit box-shadow erzielt
tr:hover td { position: relative; box-shadow: 0px 0px 1px #333; }
Tolle Idee, Mann – kam hierher und suchte genau nach einer Lösung für dieses Problem. Cheers
Tolle Idee, aber funktioniert nicht, wenn Sie eine bestimmte Zelle durch Ändern der Randfarbe hervorheben möchten – denken Sie an das Hervorheben von "heute" in einem Kalender. Fragen Sie nicht warum, das ist das Design...
Ich musste etwas tun, um den "fehlenden" oberen Rand zu erstellen
Haben Sie eine Idee, wie das nur auf
tr:hoverfunktionieren kann (um mit einem Rand um die gesamte Zeile hervorzuheben, nicht jede einzelne Zelle)?Ich fand es seltsam, dass die Kurzschreibweise für border-spacing links/rechts und dann oben/unten ist, anstatt der anscheinend standardmäßigen Box-Modell-Kurzschreibweisen für oben/unten und dann links/rechts. Stattdessen verwendet diese die Werte für die "x-Achse" und "y-Achse" wie bei background-position oder ähnlichem. Es wäre vielleicht erwähnenswert im Beispielcode.
Als Beispiel dafür, worüber ich spreche: http://codepen.io/arsdehnel/pen/cqjBs
Hallo, ich verwende ein mobilfreundliches kostenloses WordPress-Theme, das irgendwie den Tabellenrand jedes HTML-Tisches entfernt. Ich habe versucht, den Rand auf diese Weise anzugeben
<
table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>
in Beiträgen, trotzdem wird der Rand nicht angezeigt.
Ich habe den folgenden Code im Quellcode oder besser gesagt in der styles.css-Datei gefunden
table {
border-collapse: collapse;
}
Ich habe versucht, das mit
table {
border-collapse: separate;
border-spacing: 1px;
}
zu überschreiben. Aber es funktioniert nicht. Könnten Sie mir bitte den genauen Grund dafür nennen?
Vielen Dank im Voraus!
Mandip, haben Sie eine Antwort auf dieses Problem erhalten? Ich habe ein ähnliches Problem mit WordPress und würde mich über eine Lösung freuen
Großartig, genau das, wonach ich gesucht habe!
Es gibt ein Problem mit
border-collapse: collapse, das in Firefox einrowspanhat. Die URL für den Fehler ist unter https://bugzilla.mozilla.org/show_bug.cgi?id=332740guter Artikel (Y) er hat mir sehr geholfen, meine Verwirrung über collapse und separate zu lösen. er ist sehr informativ und die beste Website für Webentwicklung.
Mach weiter, Bro. :)
Es wäre auch cool, wenn Sie das Standardbeispiel hinzufügen würden (separate und spacing 0), was lustig ist, weil es die hässlichste aller möglichen Lösungen ist!
Ich habe eine Tabelle und border-radius an den Ecken verwendet. Das Problem ist, wenn es kollabiert, funktioniert border-radius nicht.
—— Anzeigen ——-
Meine Website http://www.microuniver.com
Hallo zusammen, ich arbeite in einem CMS auf unserer Website und habe kürzlich gelernt (mir selbst beigebracht), im Quellcode zu arbeiten, was mir geholfen hat, Dinge konsistenter zu gestalten! Ich bemerkte dies bei einer Tabelle im folgenden Link https://www.brattbank.com/hours-holidays.htm und versuchte, es zu beheben, aber ich kann dieses Problem im Code nicht sehen; hier ist der Teil "Main Office" des Codes, der sowohl in IE als auch in Chrome offensichtlich durcheinander ist. Irgendwelche Ratschläge?
table border=”0″ cellpadding=”1″ cellspacing=”1″ style=”height:80px; width:511px”>
Hauptbüro
M-F
Sa.
Ich habe dasselbe Problem wie Milap, ich bin mir nicht sicher, ob Milap dafür eine Lösung gefunden hat, aber ich habe dasselbe Problem
Hallo, ich verwende ein mobilfreundliches kostenloses WordPress-Theme, das irgendwie den Tabellenrand jedes HTML-Tisches entfernt. Ich habe versucht, den Rand auf diese Weise anzugeben
in Beiträgen, trotzdem wird der Rand nicht angezeigt.
Ich habe den folgenden Code im Quellcode oder besser gesagt in der styles.css-Datei gefunden
Ich habe versucht, das mit
zu überschreiben. Aber es funktioniert nicht. Könnten Sie mir bitte den genauen Grund dafür nennen?
Vielen Dank im Voraus!
A2D, gute Lösung, danke! Benötigte "position: relative" auf td, damit es funktioniert.
Vielen Dank für Ihren Artikel. Wenn ich den Randabstand zwischen Kopfzeile und Körper der Tabelle entfernen möchte.
Wie kann ich das tun?