CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? border-spacing 속성 사용-CSS 튜토리얼-php.cn

CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? border-spacing 속성 사용

青灯夜游

풀어 주다： 2019-05-25 11:11:07

원래의

9084명이 탐색했습니다.

CSS에서 border-spacing 속성은 표의 테두리가 "분리된" 상태일 때 인접한 셀의 테두리 사이의 거리를 설정하는 데 사용됩니다. 다음 기사에서는 border-spacing 속성을 사용하는 방법을 설명하겠습니다. 도움이 되기를 바랍니다.

CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? 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>

로그인 후 복사

렌더링:

CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? border-spacing 속성 사용

예 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>

로그인 후 복사

렌더링:

CSS에서 표 테두리 사이의 거리를 설정하는 방법은 무엇입니까? border-spacing 속성 사용