CSS에서 cellpadding 및 cellspacing 을 설정?

HTML 테이블에서 다음과 같이 설정할 수 있습니다.cellpaddingcellspacing

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

CSS를 사용하여 어떻게 동일한 작업을 수행할 수 있습니까?

 

CSS에서 "셀패딩"을 제어하려면 테이블 셀에서 만 사용할 수 있습니다. 예를 들어 "셀패딩"의 10px:padding

td { 
    padding: 10px;
}

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

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

이 속성은 심지어 별도의 수평 및 수직 간격을 허용합니다, 당신이 구식 "셀 간격"으로 할 수없는 무언가.

IE ≤ 7의 문제

이 인터넷 익스플로러를 통해 인터넷 익스플로러를 제외한 거의 모든 인기있는 브라우저에서 작동합니다 7, 당신은 거의 운이있어. 나는이 브라우저가 여전히 인접한 테이블 셀의 테두리를 병합 속성을 지원하기 때문에 "거의"말한다. 셀 간격을 제거하려는 경우(즉,) 테이블 셀 사이에 공백이 없는 동일한 효과가 있어야 합니다. 그러나 테이블 요소의 기존 HTML 특성을 재정의하지 않으므로 이 지원은 버그입니다.border-collapsecellspacing="0"border-collapse:collapsecellspacing

요컨대: 비 인터넷 익스플로러 5-7 브라우저의 경우 처리합니다. Internet Explorer의 경우 상황이 올바른 경우(셀 간격 0을 원하고 테이블에 이미 정의되지 않음) 사용할 수 있습니다.border-spacingborder-collapse:collapse

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

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