固定配置された要素に境界線が表示されないのはなぜですか?

固定位置の要素に枠線スタイルが表示されない

CSS では、「固定」位置により要素を画面上に固定したままにすることができます周囲のコンテンツがスクロールしても。ただし、境界線のある要素に適用すると、境界線が期待どおりに表示されない場合があります。

原因:

この問題は、「border- 「崩壊」プロパティ。 「折りたたみ」に設定すると、隣接する要素間の境界線が結合され、それらの要素間で分散されます。スティッキー位置を持つ要素の場合、スティッキー要素の上の境界線は、それを含む要素 (テーブルなど) の境界線と結合することがあり、一方、下の境界線は後続の要素の境界線と結合することがあります。

解決策:

この問題を解決するには、「border-collapse」プロパティを「collapse」から「分離」に変更します。これにより、境界線が結合されるのを防ぎ、各要素に独自の境界線が確保されます。

または、次のような CSS ルールを使用して、個々の要素に境界線を明示的に定義することもできます。

table thead th {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

これにより、スティッキー テーブル ヘッダーの境界線が境界線の折りたたみの影響を受けることなくセルに直接適用されるようになります。 property.

例:

目的の動作を実現するには、次の CSS スタイルを実装します:

table {
  border-collapse: separate;
}

table thead th {
  position: sticky;
  top: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

以上が固定配置された要素に境界線が表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。