> 웹 프론트엔드 > CSS 튜토리얼 > CSS 테이블의 테두리 간격 및 테두리에 대한 자세한 설명

CSS 테이블의 테두리 간격 및 테두리에 대한 자세한 설명

黄舟
풀어 주다: 2017-06-30 10:04:39
원래의
2442명이 탐색했습니다.

1.을 사용할 수 있으며 테이블 태그에 설정해야 합니다. 또는 display은 테이블 또는 인라인 테이블 요소입니다.

  border-collapse속성이 있는 경우에만 작동합니다. 세포가 분리되지 않으면 세포 사이의 거리는 어떻게 결정됩니까?

 border-spacing:10px 30px;

 은 셀의 간격이 가로로 10px, 세로로 30px
 

table{
border-collapse: collapse;
/*设置为collapse后,border-spacing就失效了*/
/*看来这个属性要在table上设置*/
border-spacing: 130px 15px;
}
로그인 후 복사

임을 의미합니다. 테이블의 테두리

1.

여기에는 두 개의 테두리가 있는데, 하나는 테이블 태그에 설정할 수 있고 다른 하나는 td에 설정할 수 있습니다.

테이블의 테두리는 가장 바깥쪽 프레임의 테두리를 의미하고, td의 테두리는 가장 작은 셀의 테두리를 의미합니다.

구체적인 성능은 다음과 같습니다.

여기서

padding과 테두리 간격을 설정했습니다.

2.

border-collapse를 붕괴로 설정했을 때 마법 같은 장면이 일어났습니다.

패딩과 테두리 간격은 더 이상 작동하지 않습니다. 테두리 간격은 이해할 수 있지만 패딩이 효과가 없는 이유는 무엇입니까?

이 속성을 설정하면 모든 테두리가 함께 연결되는 것이 핵심이라고 이해합니다. 주변 경계와 세포 경계를 포함하여 세포가 더 이상 분할되지 않습니다.

위 내용은 CSS 테이블의 테두리 간격 및 테두리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿