집 >웹 프론트엔드 >CSS 튜토리얼 >고정 테이블 머리글의 테두리가 사라지는 이유는 무엇이며 어떻게 해결할 수 있습니까?

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

Mary-Kate Olsen원래의: 2024-11-29 07:46:10537검색

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

css while Attribute Property this position border table tr th issue

성명：

이전 기사：CSS 애니메이션 매개변수를 동적으로 사용자 정의하려면 어떻게 해야 합니까?다음 기사：CSS 애니메이션 매개변수를 동적으로 사용자 정의하려면 어떻게 해야 합니까?