border-collapse:collapse를 설정한 후 테이블의 테두리를 어떻게 병합합니까?

둥근 모서리가 필요한 테두리를 발견했는데 border-collapse:collapse를 설정한 후 border-radius:5px가 작동하지 않는다는 것을 여러 가지로 확인한 결과 CSS 자체에 존재하는 것으로 나타났습니다. 함께 사용됩니다. 그래서 테이블의 둥근 모서리를 만들기 위해 다른 방법이 사용되었습니다.
하지만 이제 테이블의 테두리와 td 및 th의 테두리가 어떻게 하나의 테두리로 병합되는지 정말 알고 싶습니다.
테이블의 왼쪽 상단과 첫 번째 모서리의 교차점과 유사합니다. 두 테두리가 병합된 후에도 테이블의 테두리가 유지되나요, 아니면 th의 테두리가 유지되나요? 유지되는 것이 th의 테두리인 경우 첫 번째 th의 왼쪽 위 모서리에 border-radius를 설정해도 여전히 효과가 없는 이유는 무엇입니까?

Laxative -v-, 지난 금요일 그룹에서 공유할 때 우리는 국경 붕괴의 우선순위에 대해 언급했습니다. 테이블의 w3c 섹션에는 국경 붕괴: 붕괴의 충돌 처리에 대한 지침이 있습니다.

이 문서에는 매우 직관적인 두 가지 자세한 예제가 포함되어 있습니다.

다음에 요약합니다: (전제 border-collapse: 붕괴)
1. border-style = [hidden|none]
hidden이 가장 높은 우선순위를 가집니다. 두 개의 테두리가 집합되는 경우입니다. 숨김으로 설정된 경우 최종 결과는 테두리가 표시되지 않으며 어느 하나도 없음으로 설정되어 있으면 다른 하나는 결과로 직접 사용됩니다.

보통 border-style:hidden과 border-style:none은 테두리를 표시하지 않습니다. border-collapse:collapse를 사용할 경우 차이가 있습니다.

2. border-width가 일치하지 않으면 더 큰 border-width를 사용합니다
3. border-style≠[hidden|none]이 일치하면 다음 우선순위를 사용합니다. double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
4 테두리 색상만 다른 경우: 돔 계층 구조를 따릅니다. 하위 요소의 테두리 스타일이 상위 요소의 테두리 스타일보다 낫습니다. [cell > row > rowgroup > table]; 계층 구조가 형제 관계인 경우 table을 예로 들면 왼쪽과 위쪽이 우선합니다.

그러나 특히 흥미로운 점은 사양에서 모서리 접기 논리를 지정하지 않기 때문에 Chrome과 Firefox에서 성능이 다르다는 것입니다. .
크롬과 파이어폭스에서 별도로 열 수 있습니다: BQEMea
아래 사진은 형제 TD이고 색상만 일치하지 않으며 왼쪽은 크롬, 오른쪽은 파이어폭스

위 내용은 border-collapse:collapse를 설정한 후 테이블의 테두리를 어떻게 병합합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!