So zeigen Sie den Rahmen an, wenn td leer ist

Zuvor habe ich zusammengefasst, wie man mit CSS die Effekte „Rahmen + Rahmenfarbe dunkel + Rahmenfarbe hell“ einer Tabelle erzielt. Dann fragte mich ein Internetnutzer, warum er einen ähnlichen CSS-Stil geschrieben hat, der Tabellenrahmeneffekt aber nur unter Opera normal sichtbar ist, unter IE jedoch nicht.
Ich habe Opera 9 heruntergeladen und gesehen, dass dies tatsächlich der Fall war. Der Grund ist nicht kompliziert: Wenn im Internet Explorer (Firefox scheint dasselbe zu sein wie der Internet Explorer) der Inhalt eines td leer ist, wird der Rahmenstil der Zelle nicht angezeigt, selbst wenn Sie Höhe und Breite festlegen. Opera wendet den Stil zum Rendern an, unabhängig davon, ob Inhalt vorhanden ist oder nicht. Ich bin gleich nach meinem Abschluss auf dieses Problem gestoßen. Der Abteilungsleiter kam zu mir und fragte mich, und ich sagte ihm: Fügen Sie es einfach zu jedem leeren TD hinzu. Wenn ich in Zukunft auf dieses Problem stoße, werde ich diese einfache, grobe und effektive Methode zur Lösung verwenden.
Aber heute habe ich mir große Mühe gegeben, es ein wenig zu studieren, und von Jiarry gelernt, dass die ursprüngliche CSS-Syntax es uns ermöglicht, diese Standardverhaltensweisen zu ändern: Die Verwendung von border-collapse:collapse; und empty-cells:show; kann den verschwundenen Rahmen wieder erscheinen lassen.
Klasse="test1": border-collapse:collapse hinzufügen;
.test1{
Rahmen: 1px durchgezogen #999999;
Rahmen-Collapse:Collapse;
Breite: 60 %
}
.test1 td{
Rahmen unten: 1px durchgezogen #999999;
Höhe: 28px;
Polsterung links: 6px;
}
class1 Hier ist der Inhalt Hier ist der Inhalt
Klasse="test2": border-collapse:collapse hinzufügen; und empty-cells:show;
.test2{
Rand: 1px, durchgehend schwarz;
Rahmen-Collapse:Collapse;
Breite: 60 %
}
.test2 td{
Rahmen unten: 1px, durchgehend schwarz;
Höhe: 28px;
Polsterung links: 6px;
leere Zellen: anzeigen;
}
class2 Hier ist der Inhalt Hier ist der Inhalt
Klasse="test3": Ohne border-collapse:collapse; und empty-cells:show;
.test3{
Rahmen: 1px durchgezogen #999999;
Breite: 60 %
}
.test3 td{
Rahmen unten: 1px durchgezogen #999999;
Höhe: 28px;
Polsterung links: 6px;
}
class3 Hier ist der Inhalt Hier ist der Inhalt

<<: Beispiele für die Verwendung von MySQL-Abdeckungsindizes

>>: Analyse und Lösung des Grundes, warum overflow-y: visible; in CSS nicht funktioniert

So verwenden Sie js, um festzustellen, ob eine Datei UTF-8-codiert ist

So zeigen Sie den Rahmen an, wenn td leer ist

So verwenden Sie js, um festzustellen, ob eine Datei UTF-8-codiert ist

Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet

Detaillierte Erklärung der grundlegenden Interaktion von Javascript

Eine gängige Technik zur Implementierung von Dreiecken mit CSS (mehrere Methoden)

Beispielcode für die Verwendung von CSS zum Schreiben eines strukturierten Hintergrundbilds mit Farbverlauf

Detaillierte Erklärung zur korrekten Installation von OpenCV auf Ubuntu

So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden

Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM

So verwenden Sie Bind zum Einrichten eines DNS-Servers

So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)

Artikel empfehlen

Detaillierte Erklärung von Softlinks und Hardlinks in Linux

js um das Schlangenspiel mit Kommentaren zu implementieren

Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

Beherrschen Sie die CSS-Eigenschaft „display:flow-root“-Deklaration in einem Artikel

Lernen Sie, wie Sie mit charAt() in JavaScript die am häufigsten vorkommenden Zeichen und deren Anzahl zählen.

Zusammenfassung und Beispiele der Kommunikationsmethoden für Vue3-Komponenten

Implementieren von Rechnerfunktionen mit dem WeChat-Applet

Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx

Detaillierte Erläuterung der Docker Volume-Berechtigungsverwaltung

So installieren Sie Tomcat8 im Docker

Lösung für das Problem „Linux QT Kit fehlt“ und „Version leer“

MySQL Slow Query-Optimierung: Die Vorteile von Limit aus Theorie und Praxis

Navicat importiert CSV-Daten in MySQL

So verbinden Sie Django 2.2 mit einer MySQL-Datenbank

Beheben Sie das Problem des schwarzen Bildschirms beim Starten der virtuellen VMware-Maschine