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

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 </th><td> or </td><th> in a row */
table th:first-child,
table td:first-child {
  border-left: 2px solid;
}<p>Mit diesen Änderungen werden die Ränder ordnungsgemäß an die Tabellenkopfelemente (</p>
</th><th>) angehängt und bleiben dabei fixiert Scrollen und ein reduziertes Erscheinungsbild beibehalten.</th>

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!