고정 테이블 머리글의 테두리가 사라지는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 위치 요소의 테두리 스타일 문제

HTML에서 요소에 position:sticky를 적용하면 고유한 렌더링 문제가 발생할 수 있습니다. 국경까지. 이 문제는 고정 요소의 테두리가 레이아웃의 다른 요소와 상호 작용할 때 발생합니다.

문제:

요소가 고정 배치되면 사용자가 고정된 후에 수정됩니다. 특정 지점을 지나서 스크롤됩니다. 그러나 다음 조건이 충족되면 고정 요소의 테두리가 요소에 부착되지 않을 수 있습니다.

• 상위 요소에 border-collapse:collapse(기본값)가 있습니다.
• 끈적 요소는 테이블 헤더()입니다.

이유:

CSS의 테두리 축소는 인접한 셀이나 요소의 테두리를 결합하여 단일 테두리를 만듭니다. 고정 테이블 헤더의 경우 요소는 이러한 테두리 붕괴의 영향을 받아 사라지거나 예기치 않게 작동할 수 있습니다.

해결책:

이 문제를 해결하려면 다음 두 가지 접근 방식이 있습니다.

1. border-collapse: Separate 사용

border-collapse:collapse를 border-collapse:separate로 변경하면 테두리가 접히지 않습니다. 각 요소(고정 헤더 포함)는 독립적인 테두리를 갖습니다.

2. 명시적으로 테두리 스타일 지정

CSS 상속에 의존하는 대신 고정 요소에 테두리를 명시적으로 적용하세요. 다음 속성을 사용하여 이 작업을 수행할 수 있습니다.

• border-top: 고정 헤더의 위쪽 테두리를 설정합니다.
• border-bottom: 고정 헤더의 아래쪽 테두리를 설정합니다. .
• border-left: 고정 헤더의 왼쪽 테두리를 설정합니다(첫 번째 열의 경우). only).
• border-right: 고정 헤더의 오른쪽 테두리를 설정합니다(마지막 열에만 해당).

예:

table {
  border-collapse: separate;
}

table th {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

table th:first-child {
  border-left: 2px solid;
}

table th:last-child {
  border-right: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

이러한 솔루션 중 하나를 구현하면 고정 테이블 헤더의 테두리가 계속 표시되고 의도한 대로 작동하도록 할 수 있습니다. 사용자가 페이지를 스크롤합니다.

위 내용은 고정 테이블 머리글의 테두리가 사라지는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!