Das Schöne an dieser Technik ist, dass Sie für Browser, die keine Bildlaufschatten unterstützen, die Tabelle weiterhin wie gewohnt scrollen können. Es bricht das Layout überhaupt nicht. Die Selektoren, die ich im Stylesheet verwende, einschließlich :not und :empty, werden absichtlich erweitert. Es ist durchaus möglich, dieselbe Tabellendarstellung mit einem traditionelleren Tarif zu erstellen, z. B. Klassen, aber mein Ziel ist es, den effizientesten CSS-Code zu verwenden. Ein besonderes Problem, das es zu vermeiden gilt, ist die Verdoppelung der Grenzen: Sie möchten nicht, dass eine Zellenwand in der Tabelle aufgrund eines Rahmens sowohl auf sie als auch auf einem benachbarten Element dicker erscheint als die anderen. Zu diesem Zweck: Es ist möglich, eine Tabelle in einer anderen zu verschachteln, solange Sie die gesamte Struktur, einschließlich der
Element, einschließen. Dies ist in der Regel nicht wirklich ratsam, da es das Markup verwirrender und weniger zugänglich für Screenreader-Benutzer macht, und in vielen Fällen können Sie genauso gut einfach zusätzliche Zellen/ Zeilen/Spalten in die vorhandene Tabelle einfügen. Manchmal ist es jedoch notwendig, zum Beispiel, wenn Sie Inhalte leicht aus anderen Quellen importieren möchten. Wenn wir dann den Pseudoklassenselektor :last-child verwenden, um das letzte
Element innerhalb des Abschnitts zu identifizieren, legen wir den unteren Rand auf 0 Pixel fest.
Dadurch wird verhindert, dass diese Tabelle in Konflikt mit der unteren Auffüllung steht, die zum
Element mit einem Klassenattributwert der Zeile gehört. Chen Hui Jing hat eine Tonne Designmuster für Tabellen in Angriff genommen, die nützlich sein könnten, wenn Tabellen erstellt werden, die für das Web leicht lesbar und reaktionsschnell sind: Nach dem
Element fügen wir zwei
Elemente für die beiden Referenten hinzu, die zu dieser Zeit präsentiert wurden. Direkt in jedem