border-collapse 속성은 테이블 요소에 사용되며 테이블의 두 테두리를 단일 테두리로 병합하도록 설정하는 데 사용할 수 있습니다. 모든 주요 브라우저는 border-collapse 속성을 지원합니다.
CSS border-collapse 속성을 어떻게 사용하나요?
border-collapse 속성은 테이블의 테두리를 단일 테두리로 축소할지 아니면 표준 HTML처럼 별도로 표시할지를 설정합니다.
구문:
border-collapse: separate|collapse|inherit;
속성 값:
● separate: 기본값. 국경이 분리됩니다. border-spacing 및 빈 셀 속성은 무시되지 않습니다.
●접기: 가능하다면 테두리를 하나의 테두리로 병합합니다. border-spacing 및 빈 셀 속성은 무시됩니다.
● 상속: border-collapse 속성의 값이 상위 요소에서 상속되도록 지정합니다.
참고: 모든 주요 브라우저는 border-collapse 속성을 지원합니다. 속성 값 "inherit"는 모든 버전의 Internet Explorer(IE8 포함)에서 지원되지 않습니다. !DOCTYPE을 지정하지 않으면 border-collapse로 인해 예상치 못한 결과가 발생할 수 있습니다.
css border-collapse 속성 예
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Bill</td>
<td>20</td>
</tr>
<tr>
<td>Steven</td>
<td>25</td>
</tr>
</table>
</body>
</html>렌더링:
위 내용은 CSS의 테두리 축소 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
