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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!