CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? border-spacing 속성 사용
- 青灯夜游원래의
- 2019-02-18 10:46:269102검색
CSS에서 border-spacing 속성은 표의 테두리가 "분리된" 상태일 때 인접한 셀의 테두리 사이의 거리를 설정하는 데 사용됩니다. 다음 기사에서는 border-spacing 속성을 사용하는 방법을 설명하겠습니다. 도움이 되기를 바랍니다.
CSS 테두리 간격 속성
border-spacing 속성은 테이블 테두리가 "분리"될 때 행과 셀 테두리의 가로 및 세로 간격을 설정합니다. [동영상 튜토리얼 추천: CSS 튜토리얼]
1~2개의 길이 값을 가질 수 있습니다:
● 두 개의 길이 값이 모두 제공되면 첫 번째는 가로 간격에 적용되고 두 번째는 가로 간격에 적용됩니다. 수직 간격.
● 길이 값을 하나만 제공하는 경우 이 값은 가로 및 세로 간격에 적용됩니다.
설명: border-spacing 속성은 HTML 태그 속성cellspacing과 동일합니다.
참고: 이 속성은 테이블 테두리가 독립적인 경우(즉, border-collapse 속성이 분리로 설정된 경우)에만 작동합니다.
CSS 테두리 간격 속성 사용 예
다음은 border-spacing 속성이 테이블 테두리 사이의 거리를 설정하는 방법을 보여주는 간단한 코드 예입니다.
예 1: 테두리 축소 설정: 축소 ;언제:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table1 {
border-collapse: collapse;
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>렌더링:
예 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px;
}
#table3 {
border-collapse: separate;
border-spacing: 15px 30px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
<table id="table2">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
<h2>border-spacing: 15px 30px:</h2>
<p>使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：</p>
<table id="table3">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>렌더링:
코드 설명:
경계가 독립된 경우(border-collapse 속성 Separate 설정), border-spacing 속성은 인접한 가장자리가 병합될 때 적용됩니다(border-collapse 속성이 축소로 설정된 경우). border-spacing 속성은 유효하지 않습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !
위 내용은 CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? border-spacing 속성 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!