固定配置されたテーブルヘッダーで枠線スタイルが機能しないのはなぜですか?それを修正するにはどうすればよいですか?

境界線スタイルは固定位置要素では機能しません

固定位置は、要素を画面上の所定の位置に固定できる便利な CSS プロパティです。ユーザーがページを下にスクロールした場合でも、画面に表示されます。ただし、スティッキー要素に境界線スタイルを適用しようとすると、複雑な問題が発生する可能性があります。

問題:

ここで提供されている例では、テーブル ヘッダーは次のように設定されています。スティッキーおよびインラインの境界線スタイルが

に適用されました。要素。ただし、表をスクロールしても境界線のスタイルは表示されず、ヘッダーのスタイルが設定されていない状態になります。

原因:

境界線の使用により競合が発生します。崩壊：崩壊する。このプロパティを使用すると、隣接する表セルの境界線が折りたたまれて結合されます。スティッキー ヘッダーと組み合わせると、スクロール時にマージされた境界線が失われます。

解決策:

この問題を解決するには、border-collapse: Separate、それは国境の崩壊を防ぎます。さらに、セルとヘッダーの特定の側に配置されるように境界線を調整する必要があります。これにより、スクロールしても境界線が付加され、表示されたままになります。

CSS ソリューション:

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first </th><td> or </td><th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}<p>これらのスタイルを適用すると、スクロールしても境界線スタイルが表示されたままになります。スティッキーヘッダーの目的のデザインを維持したまま、テーブルがスクロールされます。</p>
</th>

以上が固定配置されたテーブルヘッダーで枠線スタイルが機能しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。