CSS - 셀 간격이있는 표 안의 테두리 만

Question

셀 간격이있는 표 내부에만 테두리를 추가하는 방법을 알아 내려고하고 있습니다. 내가 할 때 :

table { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table td, table th { 
    border: 1px solid black; 
} 

간격이 거의없는 셀만 작동합니다. 그것을 성취하는 방법?

table[cellspacing] { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table[cellspacing] td, table[cellspacing] th { 
    border: 1px solid black; 
} 

그러나 그것은 훨씬 깨끗하고 것 :

감사

Answer 1

당신이 cellspacing 속성을 정의한있는 테이블에 대한 CSS 규칙을 작성하려는 경우, 해결책이 될 수있다 테이블에 수업을 더 효율적으로 제공합니다 (<table class="withspace">). 그래서 당신은 더 클래식

table.withspace { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table.withspace td, table.withspace th { 
    border: 1px solid black; 
} 

편집을 할 것이다 : 단지의 경우, 당신이 원하는 것은, 당신의 세포에 약간의 공간이 당신의 CSS에 패딩 값을 추가하는 것입니다 경우 :

table { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table td, table th { 
    border: 1px solid black; 
    padding: 4px; 
} 

Answer 2

CSS의 게시 된 코드가 정확하고 일치하는 브라우저에서 셀 사이에 테두리가 생기고 (전체적으로 표 주위에 있음) 셀과 셀 사이에 4px 간격이 생깁니다. 나는 당신이 border-spacing 속성을 지원하지 않는 IE 7 이전 버전에서이를 테스트하고 있다고 가정합니다.

경계가없는 표를 만들고 각 셀 안에 내부 요소를 넣으면 작은 여백을 제외한 전체 셀을 차지하고 내부 요소 주위에 테두리가 생기는 것보다 간단한 해결 방법이 없습니다. 이것은 아마도 추악 해지기 때문에 IE 7에 대한 프레젠테이션을 차선책으로 삼으십시오.

은 (어떤 이유로, border-spacing는 jsfiddle에서 작동하지 않는 것 같습니다. 아마 몇 가지 일반적인 규칙은 속성을 설정하는 일반 시도보다 우선합니다.)