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

MySQL-Startfehler InnoDB: Sperren nicht möglich/ibdata1-Fehler

So zeigen Sie den Rahmen an, wenn td leer ist

MySQL-Startfehler InnoDB: Sperren nicht möglich/ibdata1-Fehler

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Einführung in die Verschlüsselung des Grub-Boot-Programms in Linux

Lösung für BT Baota Panel php7.3 und php7.4 unterstützen ZipArchive nicht

So verwenden Sie Elemente in React-Projekten

Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt

Div kann Inhalte eingeben, ohne die Eingabe als Eingabefeld zu verwenden, um den automatischen Eingabestil zu blockieren

Detaillierte Erklärung der MySQL-Gruppierung durch Optimierung

Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht

Detaillierte Erklärung des Prinzips zum Erstellen von Tomcat in Eclipse

Artikel empfehlen

Erfahren Sie, wie Sie einen Hadoop 3.x-Pseudocluster auf der Tencent Cloud erstellen

Reflexion und Proxy in Front-End-JavaScript

Detaillierte Erklärung des Docker Compose-Orchestrierungstools

Detaillierte Erläuterung der Konstruktion der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation

Implementierung der Docker-Bereitstellung des SQL Server 2019 Always On-Clusters

So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

Analysieren Sie, wie Sie automatisch Vue-Komponentendokumentation generieren

Vollständige Schritte zur Verwendung von Nginx+Tomcat zum Lastenausgleich unter Windows

So stellen Sie MySQL-Master und -Slave in Docker bereit

Detaillierte Erklärung des Initialisierungsmechanismus in Bash

Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)

So installieren Sie Nginx in CentOS

Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung

Drei Möglichkeiten zum Weiterleiten des Linux-SSH-Ports

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac