固定テーブルのヘッダーの境界線が失われるのはなぜですか?どうすれば修正できますか?

スティッキー テーブル ヘッダーの境界線スタイルが表示されなくなる

position: スティッキー属性を使用してテーブル ヘッダーの境界線をスタイルしようとすると、境界線が消えるという問題が発生します。この問題は、border-collapse:collapse の使用に起因します。

CSS では、border-collapse プロパティによって、隣接する表の境界線がどのように相互作用するかが決まります。 border-collapse が折りたたみに設定されている場合、セル間の境界線が削除され、単一の境界線が隣接するすべての要素を囲んでいるような外観が作成されます。

この場合、border-collapse: Collapse を使用すると、目的の結果が妨げられる可能性があります。位置の影響: 粘着性。境界線が折りたたまれると、上端と下端は

番目の境界線になります。タグは、テーブル () 自体や次の行 () など、周囲の要素に浸透します。

この問題を解決するには、border-collapse: Separate を慎重に作成された境界線スタイルと組み合わせて使用​​し、目的の効果を実現します。以下に、境界線をそのままの状態で所定の位置に固定する、修正された CSS ルールをいくつか示します。

/* 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>これらの変更により、境界線はテーブル ヘッダー (</p>
</th><th>) 要素に適切に付加され、固定されたままになります。スクロールし、折りたたまれた外観を保持します。</th>

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