고정 위치 테이블 헤더에서 테두리 스타일이 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 위치 요소에서는 테두리 스타일이 작동하지 않습니다.

고정 위치 지정은 요소가 고정 위치에 고정되도록 하는 편리한 CSS 속성입니다. 사용자가 페이지를 아래로 스크롤하는 경우에도 마찬가지입니다. 그러나 고정 요소에 테두리 스타일을 적용하려고 하면 문제가 발생할 수 있습니다.

문제:

제공된 예에서 테이블 헤더는 다음과 같이 설정됩니다. 고정 및 인라인 테두리 스타일이 <번째> 강요. 그런데 표를 스크롤할 때 테두리 스타일이 나타나지 않고 머리글에 스타일이 없는 상태로 남아있습니다.

원인:

테두리 사용으로 인해 충돌이 발생합니다- 붕괴: 붕괴. 이 속성을 사용하면 인접한 테이블 셀의 테두리가 축소되어 함께 병합됩니다. 고정 헤더와 결합하면 스크롤 시 병합된 테두리가 사라집니다.

해결책:

이 문제를 극복하려면 border-collapse: 분리를 사용할 수 있습니다. 국경의 붕괴를 방지하는 것입니다. 또한 셀과 머리글의 특정 면에 위치하도록 테두리를 조정해야 합니다. 이렇게 하면 스크롤할 때에도 테두리가 부착되어 표시됩니다.

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 <td> or <th> in a row */
  border-left: 2px solid;
}

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

이러한 스타일을 적용하면 스크롤할 때에도 테두리 스타일이 계속 표시됩니다. 고정 헤더의 원하는 디자인을 유지하면서 테이블이 스크롤됩니다.

위 내용은 고정 위치 테이블 헤더에서 테두리 스타일이 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!