HTML에서 테이블 요소 사이의 간격을 제거하는 방법은 무엇입니까?

표 요소 사이의 간격 제거

현재 작업은 표의 행과 열 사이의 여분의 간격을 제거하는 것입니다. 다양한 테이블 요소의 여백, 안쪽 여백 및 테두리 속성을 조정하더라도 문제가 지속됩니다. 목표는 이미지를 매끄럽게 정렬하여 하나의 응집력 있는 이미지라는 환상을 만드는 것입니다.

솔루션 구현

vectran이 적절하게 언급했듯이 border-collapse 속성 세트는 축소하면 셀 경계가 효과적으로 제거되고 인접한 셀이 병합됩니다. 그 결과 세포가 함께 흐르는 것처럼 보이는 매끄러운 모양이 나타납니다. 그러나 Internet Explorer 6 및 7과 같은 이전 브라우저에는 추가 단계가 필요하다는 점에 유의해야 합니다.

테이블에 직접 셀 간격 속성을 포함하는 등 브라우저 간 호환성을 보장하는 것이 중요합니다. 이 속성에 0 값을 할당하면 기본 공백이 제거됩니다.

브라우저별 구현

Internet Explorer 버전 8 이상 및 Chrome과 같은 기타 최신 브라우저 , Firefox 및 Opera 4는 CSS 속성 border-spacing을 지원합니다. 이 속성을 사용하면 간격을 없애기 위해 0으로 설정하는 것을 포함하여 테두리 사이의 간격을 정밀하게 제어할 수 있습니다.

IE6 및 IE7을 지원하려면 테이블 속성으로 셀 간격을 0으로 명시적으로 지정해야 합니다. 크로스 브라우저 솔루션의 경우 테두리 간격 및 셀 간격 속성을 모두 통합하는 것이 좋습니다.

코드 예

table {
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}

table.no-spacing {
  border-spacing: 0; /* Removes the cell spacing via CSS */
  border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

위 내용은 HTML에서 테이블 요소 사이의 간격을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!