スティッキーテーブルヘッダーの境界線が失われるのはなぜですか?それを修正するにはどうすればよいですか?

スティッキーで配置された要素による境界線スタイルの問題

HTML で、position: Sticky を要素に適用すると、固有のレンダリングの問題が発生する可能性があります国境まで。この問題は、スティッキー要素の境界線がレイアウト内の他の要素と相互作用するときに発生します。

問題:

要素がスティッキーに配置されると、ユーザーが配置した後で固定されてしまいます。特定のポイントを超えてスクロールします。ただし、次の条件が満たされる場合、スティッキー要素の境界線は要素に付着しない可能性があります:

• 親要素に border-collapse:collapse (デフォルト値) がある。
• スティッキー要素はテーブルヘッダー () です。

理由:

CSS の境界線の折りたたみでは、隣接するセルまたは要素の境界線が結合され、単一の境界線が作成されます。スティッキー テーブル ヘッダーの場合、 の境界線は、要素はこの境界線の崩壊の影響を受け、要素が消えたり予期せぬ動作をする可能性があります。

解決策:

この問題を解決するには、次の 2 つのアプローチがあります。

1. border-collapse: Separate を使用します

border-collapse: Collapse を border-collapse: Separate に変更すると、境界線が折りたたまれなくなります。各要素 (スティッキー ヘッダーを含む) には独立した境界線が設定されます。

2.境界線を明示的にスタイル設定します

CSS 継承に依存する代わりに、明示的に境界線をスティッキー要素に適用します。これは、次のプロパティを使用して実行できます。

• border-top: スティッキー ヘッダーの上の境界線を設定します。
• border-bottom: スティッキー ヘッダーの下の境界線を設定します。 .
• border-left: スティッキーヘッダーの左境界線を設定します (最初の列の場合)
• border-right: スティッキー ヘッダーの右境界線を設定します (最後の列のみ)。

例:

table {
  border-collapse: separate;
}

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

table th:first-child {
  border-left: 2px solid;
}

table th:last-child {
  border-right: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

これらのソリューションのいずれかを実装すると、ユーザーがページをスクロールします。

以上がスティッキーテーブルヘッダーの境界線が失われるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。