ホームページ >ウェブフロントエンド >CSSチュートリアル >固定テーブルのヘッダーの境界線が失われるのはなぜですか?どうすれば修正できますか?

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

Mary-Kate Olsenオリジナル: 2024-11-29 07:46:10537ブラウズ

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

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

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 <td> or <th> in a row */
table th:first-child,
table td:first-child {
  border-left: 2px solid;
}

これらの変更により、境界線はテーブルヘッダー (

) 要素に適切に付加され、固定されたままになります。スクロールし、折りたたまれた外観を保持します。

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

css while Attribute Property this position border table tr th issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS アニメーションパラメータを動的にカスタマイズするにはどうすればよいですか?次の記事：CSS アニメーションパラメータを動的にカスタマイズするにはどうすればよいですか?

続きを見る