Die Eigenschaft border-collapse eignet sich hervorragend, um die Ränder von <table>-Zellen gleichmäßig zu gestalten. Das sorgt für ein sauberes Erscheinungsbild, das ich eigentlich bevorzuge.
Es gibt jedoch etwas, das Probleme mit der Art und Weise verursachen kann, wie ein Browser die Zellen und ihre jeweiligen Ränder zeichnet. Jede Zelle wird beim Zeichnen in Reihenfolge *unter* die vorherige platziert. Das bedeutet, wenn Tabellen unterschiedliche Randfarben haben, werden diese Ränder auf einigen Seiten verborgen.
Das Problem
Sehen Sie sich im folgenden Codebeispiel die Zellen an, um zu sehen, wie Ränder hintereinander verborgen sein können.
Siehe den Pen Table border collapse step 1 von Daniel (@gooseofmusic) auf CodePen.
Da z-index auf Zellen innerhalb einer <table> nicht funktioniert, müssen wir mit dem Inhalt innerhalb der Zellen arbeiten.
Die Lösung
Schritt 1
Fairer Hinweis: Diese Lösung verwendet negative Ränder. Für diejenigen unter Ihnen, die keine negativen Ränder mögen, schauen Sie weg.
Zuerst packen wir den Inhalt der Zelle in einen Wrapper. Verschieben Sie den Rand, den Abstand usw. nach innen, um es anzupassen.
Siehe den Pen Table border collapse step 2 von Daniel (@gooseofmusic) auf CodePen.
Das allein wird das Problem eigentlich umkehren: Die unteren und rechten Ränder erscheinen oben.
Schritt 2
Von dort aus müssen wir auch z-index zum :hover-Zustand hinzufügen, damit er sich über die anderen Elemente stapelt. Da wir den Inhalt innerhalb der Tabellenzelle z-indexen und nicht die <td> selbst, funktioniert es.
Siehe den Pen Table border collapse step 3 von Daniel (@gooseofmusic) auf CodePen.
Stellen Sie sicher, dass der z-index *nicht* in einer transition enthalten ist, sonst sehen Sie, wie die zuvor verborgenen Ränder statt auszublenden „hineinwischen“.
Funktioniert nicht beim schnellen Überfahren mit der Maus.
Das Ausblenden hat einen Glitch, der nicht wirklich schön ist. Eine bessere Methode wäre die Verwendung eines Pseudo-Elements, wodurch die Notwendigkeit eines div innerhalb jeder Tabellenzelle entfällt und dieser Glitch behoben wird.
http://codepen.io/gibatronic/pen/OXzEoQ
Das Problem, das ich hier sehe, ist, dass Elemente innerhalb der Zelle (wie Links) keine Zeigerereignisse empfangen können, da das Pseudo-Element sie überdeckt.
Zeigerereignisse könnten hier eine Lösung sein, aber sie werden noch nicht gut unterstützt.
Sie können das Problem mit Zeigerereignissen lösen, indem Sie der td einen z-index und dem Pseudo-Element einen negativen z-index geben (wodurch es hinter der td, aber vor der Tabelle platziert wird). Ich habe dies nicht browserübergreifend getestet.
http://codepen.io/jproffitt71/pen/JKrBmO/
Ja... im Fall eines Ankers oder Buttons müssten die Stile dorthin verschoben werden, was das Problem der Behinderung durch das Pseudo-Element löst.
Box-shadow als Alternative. Niemand wird den Unterschied bemerken und keine Magie.
http://codepen.io/Nargus/pen/XKVozE/
Schön! Das scheint die bisher beste Lösung zu sein.
Öfter verwende ich Box-Schatten, um Ränder zu erstellen. Das gibt mir viel mehr Kontrolle als normale Ränder/Konturen. Guter Punkt, Vitali!
Warum nicht einfach die outline-Eigenschaft mit outline-offset verwenden?
Weil die outline keine abgerundeten Ecken zulässt, wenn man sie braucht.