고정 테이블 머리글의 테두리가 사라지는 이유는 무엇이며 어떻게 해결할 수 있습니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Mary-Kate Olsen

Nov 29, 2024 am 07:46 AM

Why Do My Sticky Table Headers Lose Their Borders, and How Can I Fix It?

고정 테이블 헤더에서 테두리 스타일이 사라집니다

position: 고정 속성을 사용하여 테이블 헤더의 테두리 스타일을 지정하려고 할 때 다음과 같은 문제가 발생할 수 있습니다. 국경이 사라지는 문제가 발생합니다. 이 문제는 border-collapse:collapse 사용으로 인해 발생합니다.

CSS에서 border-collapse 속성은 인접한 테이블 테두리가 상호 작용하는 방식을 결정합니다. border-collapse가 축소로 설정되면 셀 사이의 테두리가 제거되어 단일 테두리가 모든 인접한 요소를 둘러싸는 것처럼 보입니다.

이 경우 border-collapse:collapse를 사용하면 원하는 내용을 방해할 수 있습니다. 위치 효과: 끈적임. 테두리가 접히면 위쪽 및 아래쪽 테두리가 태그는 테이블(

) 자체와 다음 행()을 포함하여 주변 요소로 흘러갑니다.

이 문제를 해결하려면 신중하게 제작된 테두리 스타일과 함께 border-collapse: Separate를 사용하여 원하는 효과를 얻을 수 있습니다. 다음은 테두리를 그대로 유지하고 제자리에 고정하는 몇 가지 수정된 CSS 규칙입니다.

/* Reset border collapse to separate */
border-collapse: separate;

/* Apply both top and bottom borders to the <th> */
table th {
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* For cells, apply the border to one side only */
table td {
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Apply a left border on the first <td> or <th> in a row */
table th:first-child,
table td:first-child {
  border-left: 2px solid;
}

로그인 후 복사

이러한 수정을 통해 테두리는 테이블 헤더(<번째>) 요소에 제대로 연결되고, 스크롤하고 접힌 모양을 유지합니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.