프로그래밍 언어/HTML,CSS,JS

CSS에서 테이블 셀 패딩 및 셀 간격을 설정하는 방법

Rateye 2021. 9. 17. 11:35
728x90
반응형

 

질문 : CSS에서 셀 패딩 및 셀 간격을 설정 하시겠습니까?

HTML 테이블에서 cellpadding 및 cellspacing 은 다음과 같이 설정할 수 있습니다.

<table cellspacing="1" cellpadding="1">

CSS를 사용하여 어떻게 똑같이 할 수 있습니까?

답변

기초

padding "을 제어하려면 표 셀에 패딩을 사용하면됩니다. 예 : 10px의 "cellpadding":

td { 
    padding: 10px;
}

"cellspacing"의 경우 border-spacing CSS 속성을 테이블에 적용 할 수 있습니다. 예 : 10px의 "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

이 속성은 별도의 수평 및 수직 간격을 허용합니다. 구식 "셀 간격"으로는 할 수없는 일입니다.

IE ≤ 7의 문제

이것은 거의 운이없는 Internet Explorer 7까지의 Internet Explorer를 제외한 거의 모든 인기있는 브라우저에서 작동합니다. 이 브라우저는 인접한 표 셀의 테두리를 병합하는 border-collapse 속성을 여전히 지원하기 때문에 "거의"라고 말합니다. 셀 간격을 제거하려는 경우 (즉, cellspacing="0" ) border-collapse:collapse 는 동일한 효과를 가져야합니다. 테이블 셀 사이에 공백이 없습니다. cellspacing HTML 속성을 재정의하지 않기 때문에 버그가 있습니다.

요약하자면 Internet Explorer 5-7이 아닌 브라우저의 경우 border-spacing 처리됩니다. Internet Explorer의 경우 상황이 적절하다면 (셀 간격이 0이고 테이블에 이미 정의되어 있지 않은 경우) border-collapse:collapse 사용할 수 있습니다.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

참고 : 테이블 및 브라우저에 적용 할 수있는 CSS 속성에 대한 훌륭한 개요는이 환상적인 Quirksmode 페이지를 참조하십시오 .

출처 : https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css
728x90
반응형