HTML 테이블에서 cellpadding
and cellspacing
는 다음과 같이 설정할 수 있습니다.
<table cellspacing="1" cellpadding="1">
CSS를 사용하여 어떻게 동일한 작업을 수행 할 수 있습니까?
답변
기초
CSS에서 ” padding
셀 패딩”을 제어하기 위해 간단히 테이블 셀에서 사용할 수 있습니다 . 예를 들어 “셀 패딩”10px :
td {
padding: 10px;
}
“셀 간격”의 경우 border-spacing
CSS 속성을 테이블에 적용 할 수 있습니다 . 예를 들어 “셀 간격”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 cellspacing
는 border-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;
}