기초

CSS에서 ” padding셀 패딩”을 제어하기 위해 간단히 테이블 셀에서 사용할 수 있습니다 . 예를 들어 “셀 패딩”10px :

td { 
    padding: 10px;
}

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

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 페이지를 참조하십시오 .

답변

table {border-collapse: collapse;}
td    {padding: 0px;}

table {border-collapse: collapse;}
td    {padding: 6px;}

table {border-spacing: 2px;}
td    {padding: 0px;}

table {border-spacing: 2px;}
td    {padding: 6px;}

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

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

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}