>  기사  >  웹 프론트엔드  >  HTML과 CSS에서 표 테두리 간격을 제거하는 방법은 무엇입니까?

HTML과 CSS에서 표 테두리 간격을 제거하는 방법은 무엇입니까?

DDD
DDD원래의
2024-11-15 03:56:02294검색

How to Eliminate Table Border Spacing in HTML and CSS?

표 테두리 간격 제거

제공된 코드는 표의 행과 열 사이에 과도한 간격을 보여 원하는 원활한 모양을 방해합니다. 이 문제를 해결하려면 다음 스타일을 구현하십시오.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

border-collapse:collapse 속성은 인접한 테이블 테두리를 병합하여 요소 사이의 눈에 띄는 구분을 제거합니다. 또한 테두리 간격을 0으로 설정하면 셀 간격 제거가 명시적으로 지정됩니다.

브라우저 간 호환성

브라우저 간 호환성, 특히 Internet Explorer 6 및 7에서는 테이블 요소에서 직접 cellspacing 속성을 활용하는 것이 중요합니다.

<table cellspacing="0">

브라우저 지원을 위한 업데이트된 권장사항

인터넷에서는 한때 cellpacing을 직접 설정해야 했습니다. Explorer 버전 6 및 7, 최신 버전의 Internet Explorer 및 기타 널리 사용되는 브라우저는 CSS 테두리 간격 속성을 지원합니다. 브라우저 간 호환성을 위해서는 두 가지 방법을 모두 활용하는 것이 좋습니다.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table.no-spacing {
  cellspacing: 0; /* Supports IE6 and IE7 */
}

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.