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

Detaillierte Erklärung zum Erkennen und Verhindern von JavaScript-Endlosschleifen

Lösung für die Eingabeaufforderung „Keine solche Datei oder kein solches Verzeichnis“ beim Ausführen ausführbarer Dateien unter Linux

Artikel

Detaillierter Installationsprozess des NodeJS-Verwaltungstools NVM

So zeigen Sie den Rahmen an, wenn td leer ist

Detaillierte Erklärung zum Erkennen und Verhindern von JavaScript-Endlosschleifen

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

Bootstrap 3.0-Lernunterlagen für Anfänger

Analyse der vier Transaktionsisolationsstufen in MySQL anhand von Beispielen

Lösung für die Eingabeaufforderung „Keine solche Datei oder kein solches Verzeichnis“ beim Ausführen ausführbarer Dateien unter Linux

Detaillierter Installationsprozess des NodeJS-Verwaltungstools NVM

MySQL-Paging-Abfragemethode für Millionen von Datenmengen und ihre Optimierungsvorschläge

Problemlösungsvorgänge für Alpine Docker-Bildschriftarten

Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung

Schritte zur Implementierung des cuda10.1-Treibers bei der Installation von Ubuntu

Artikel empfehlen

Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10

Lassen Sie uns im Detail darüber sprechen, wie Browser Abschlüsse betrachten

So verwenden Sie reguläre Ausdrucksabfragen in MySql

Der gesamte Prozess der Implementierung des Zusammenfassungs-Popup-Fensters mit Vue+Element UI

vue.js Router verschachtelte Routen

Grafisches Tutorial zur Installation und Konfiguration von MySQL Community Server 8.0.11

So ändern Sie MySQL, um Remoteverbindungen zuzulassen

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

Detaillierte Erklärung dieser Referenz und benutzerdefinierter Eigenschaften in JavaScript

Vergleich der Verwendung von Formularelementattributen schreibgeschützt und deaktiviert

So fragen Sie ab, ob die MySQL-Tabelle gesperrt ist

MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen

Zabbix' PSK-Verschlüsselung kombiniert mit zabbix_get-Wert

Detaillierte Erklärung, wie man HSTS in nginx aktiviert, um den Browser zu zwingen, auf HTTPS-Zugriff umzuleiten

TypeScript-Problem beim Iterieren über Objekteigenschaften