CSS에서 cellpadding과 cellspacing을 설정 하시겠습니까? 테이블에서 cellpaddingand cellspacing는 다음과 같이

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

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

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



답변

기초

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;}

        

참고 :border-spacing 설정되어 있으면 border-collapse테이블의 속성이 separate입니다.

직접 해보십시오!

여기에서 이것을 달성하는 오래된 HTML 방법을 찾을 수 있습니다.


답변

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

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

답변

테이블 셀에 여백을 설정해도 실제로 아는 한 효과가 없습니다. 에 해당하는 실제 CSS cellspacingborder-spacing-이지만 Internet Explorer에서는 작동하지 않습니다.

border-collapse: collapse언급 한대로 셀 간격을 안정적으로 0으로 설정 하는 데 사용할 수 있지만 다른 값의 경우 브라우저 간 유일한 방법은 cellspacing속성 을 계속 사용하는 것입니다.


답변

이 핵은 Internet Explorer 6 이상, Chrome , Firefox 및 Opera에서 작동합니다 .

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

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

*선언은 Internet Explorer 6 및 7이고, 다른 브라우저는 제대로을 무시합니다.

expression('separate', cellSpacing = '10px')returns 'separate'하지만 JavaScript에서 예상 한 것보다 많은 인수를 전달할 수 있으므로 모든 명령문이 평가되므로 두 명령문이 모두 실행됩니다.


답변

셀 간격 값이 0이 아닌 사람들을 위해 다음 CSS가 효과적이지만 Firefox에서만 테스트 할 수 있습니다.

호환성에 대한 자세한 내용 은 다른 곳에 게시Quirksmode 링크를 참조 하십시오. 이전 Internet Explorer 버전에서는 작동하지 않을 수 있습니다.

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

답변

이 문제에 대한 간단한 해결책은 다음과 같습니다.

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