CSS에서 테이블의 반복되는 테두리를 제거하는 방법

CSS에서는 border-collapse 속성을 사용하여 테이블에서 반복되는 테두리를 제거할 수 있습니다. 이 속성은 테이블 테두리를 단일 테두리로 축소할지 또는 분리할지 여부를 설정할 수 있습니다. 겹치는 테두리는 단일 선 테두리 효과를 얻기 위한 테두리가 됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

테이블 테이블에서 테두리 설정 후 겹치는 문제

table{
 border-spacing: 0;
 border-collapse: collapse;
}
table td {          
 border: 1px solid #000;
 padding: 20px 30px;
}

테이블 테이블에서 각 셀의 테두리를 추가하고 여백을 제거하면 양식에서 테두리가 겹쳐서 테두리 선이 두꺼워지는 문제가 발생합니다. , 그런 다음 border-collapse: collapse를 설정하여 테두리를 설정할 수 있습니다. 그러면 겹치는 테두리를 하나의 테두리로 병합하여 한 줄 테두리 효과를 얻을 수 있습니다.

Rendering:

설명:

border-collapse 속성은 테이블의 테두리를 단일 테두리로 병합할지 아니면 표준 HTML처럼 별도로 표시할지를 설정합니다.

속성 값:

• 별도 기본값. 국경이 분리됩니다. border-spacing 및 빈 셀 속성은 무시되지 않습니다.

• collapse 가능하다면 테두리가 하나의 테두리로 병합됩니다. border-spacing 및 빈 셀 속성은 무시됩니다.​​

관련 소개:

border는 border 속성의 약어입니다.

CSS 테두리 속성은 요소 테두리의 스타일, 너비 및 색상을 지정하는 데 사용됩니다.

설정할 수 있는 속성은 (순서대로) border-width, border-style 및 border-color입니다.

하나의 값만 설정할 수도 있습니다. 예를 들어 border: #FF0000이 정확하고 다른 값은 해당 속성의 초기 값으로 설정됩니다.

구문 형식

테두리 속성은 아래 나열된 하나, 둘 또는 세 개의 값을 사용하여 지정할 수 있으며 값의 순서는 중요하지 않습니다.

/* 边框样式 */
border: solid;
/* 边框宽度 | 边框样式 */
border: 2px dotted;
/* 边框样式 | 边框颜色 */
border: outset #f33;
/* 边框宽度 | 边框样式 | 边框颜色 */
border: medium dashed green;
/* 全局值 */
border: inherit;
border: initial;
border: unset;

참고: 테두리 스타일이 정의되지 않은 경우에는 그렇지 않습니다. 눈에 띄게. 이는 스타일이 기본적으로 없음으로 설정되어 있기 때문입니다.

관련 추천: "css 비디오 튜토리얼"

위 내용은 CSS에서 테이블의 반복되는 테두리를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!