Warum verlieren meine Sticky-Table-Header ihre Ränder und wie kann ich das beheben?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Warum verlieren meine Sticky-Table-Header ihre Ränder und wie kann ich das beheben?

Mary-Kate Olsen

Nov 29, 2024 am 07:46 AM

Why Do My Sticky Table Headers Lose Their Borders, and How Can I Fix It?

Randstile verschwinden bei Sticky-Tabellenüberschriften

Wenn Sie versuchen, die Ränder einer Tabellenüberschrift mit dem Attribut „position: sticky“ zu formatieren, kann dies passieren stoßen Sie auf ein Problem, bei dem die Grenzen verschwinden. Dieses Problem ergibt sich aus der Verwendung von border-collapse:collapse.

In CSS bestimmt die Eigenschaft border-collapse, wie benachbarte Tabellenränder interagieren sollen. Wenn „border-collapse“ auf „collapse“ eingestellt ist, werden die Ränder zwischen den Zellen entfernt, wodurch der Eindruck entsteht, dass ein einzelner Rahmen alle angrenzenden Elemente umgibt.

In diesem Fall kann die Verwendung von „border-collapse:collapse“ das Gewünschte beeinträchtigen Wirkung der Position: klebrig. Wenn Ränder ausgeblendet werden, werden die oberen und unteren Ränder am Tags fließen in die umgebenden Elemente ein, einschließlich der Tabelle (

) selbst und der folgenden Zeile ().

Um dieses Problem zu beheben, können Sie border-collapse: separat in Verbindung mit sorgfältig gestalteten Rahmenstilen verwenden, um den gewünschten Effekt zu erzielen. Hier sind einige überarbeitete CSS-Regeln, die dafür sorgen, dass die Ränder intakt und fixiert bleiben:

/* Reset border collapse to separate */
border-collapse: separate;

/* Apply both top and bottom borders to the <th> */
table th {
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* For cells, apply the border to one side only */
table td {
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Apply a left border on the first <td> or <th> in a row */
table th:first-child,
table td:first-child {
  border-left: 2px solid;
}

Nach dem Login kopieren

Mit diesen Änderungen werden die Ränder ordnungsgemäß an die Tabellenkopfelemente (

) angehängt und bleiben dabei fixiert Scrollen und ein reduziertes Erscheinungsbild beibehalten.

Das obige ist der detaillierte Inhalt vonWarum verlieren meine Sticky-Table-Header ihre Ränder und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

4 Wochen vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Inzoi: Wie man sich für Schule und Universität bewerbt

1 Monate vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Wo finden Sie den Site Office -Schlüssel in Atomfall

1 Monate vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7911

Java-Tutorial

1652

CakePHP-Tutorial

1411

Laravel-Tutorial

1303

PHP-Tutorial

1248

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Apr 02, 2025 am 04:27 AM

Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

So verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen Apr 02, 2025 pm 06:29 PM

CSS Grid ist eine Sammlung von Eigenschaften, die das Layout einfacher machen als jemals zuvor. Wie alles andere ist es eine kleine Lernkurve, aber das Gitter ist

Google -Schriftarten variable Schriftarten Apr 09, 2025 am 10:42 AM

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen

See all articles