> 웹 프론트엔드 > CSS 튜토리얼 > 고정 위치 요소에 테두리가 표시되지 않는 이유는 무엇입니까?

고정 위치 요소에 테두리가 표시되지 않는 이유는 무엇입니까?

DDD
풀어 주다: 2024-12-06 12:34:11
원래의
649명이 탐색했습니다.

Why Aren't My Borders Showing on Sticky-Positioned Elements?

고정 위치가 있는 요소에 테두리 스타일이 표시되지 않음

CSS에서 "고정" 위치를 사용하면 요소가 화면에 고정된 상태로 유지됩니다. 주변 콘텐츠가 스크롤되는 경우에도 마찬가지입니다. 다만, 테두리가 있는 요소에 적용하면 테두리가 예상대로 나타나지 않을 수 있습니다.

원인:

이 문제는 "border-" 사용으로 인해 발생합니다. 붕괴' 속성. "collapse"로 설정하면 인접한 요소 사이의 테두리가 결합되어 해당 요소 간에 분산됩니다. 고정 위치 요소의 경우 고정 요소의 상단 테두리는 포함 요소(예: 테이블)의 테두리와 병합될 수 있고 하단 테두리는 후속 요소의 테두리와 병합될 수 있습니다.

해결책:

이 문제를 해결하려면 "border-collapse" 속성을 "collapse"에서 "collapse"로 변경하면 됩니다. "분리된." 이렇게 하면 테두리가 결합되는 것을 방지하고 각 요소에 고유한 테두리가 있게 됩니다.

또는 다음과 같은 CSS 규칙을 사용하여 각 개별 요소의 테두리를 명시적으로 정의할 수 있습니다.

table thead th {
  border-top: 2px solid;
  border-bottom: 2px solid;
}
로그인 후 복사

이렇게 하면 고정 테이블 헤더의 테두리가 테두리 축소의 영향을 받지 않고 셀에 직접 적용됩니다. 속성.

예:

원하는 동작을 달성하려면 다음 CSS 스타일을 구현하세요.

table {
  border-collapse: separate;
}

table thead th {
  position: sticky;
  top: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
로그인 후 복사

위 내용은 고정 위치 요소에 테두리가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿