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

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

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