CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)-CSS 튜토리얼-php.cn

CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)

青灯夜游

풀어 주다： 2018-09-15 11:45:36

원래의

3110명이 탐색했습니다.

프런트엔드 웹페이지 개발에서는 전체 페이지 작성을 빠르게 완료하기 위해 일부 CSS 레이아웃 방법을 자주 사용합니다. CSS 레이아웃 방법에는 여러 가지가 있으며 테이블 레이아웃은 그 중 하나입니다. 오늘은 테이블 레이아웃의 css 테이블 레이아웃 속성에 대해 설명하고 테이블의 두 가지 레이아웃 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 테이블 레이아웃 속성이란 무엇인가요?

1. 정의

table-layout 속성은 테이블 셀, 행 및 열의 알고리즘 규칙을 표시하는 데 사용됩니다

#🎜 🎜#2. 사용법

table-layout: automatic || fixed || inherit;

로그인 후 복사

automatic(자동): (기본값) 열 너비는 셀 내용에 따라 설정됩니다.

fixed: 열 너비는 테이블 너비에 따라 결정됩니다. 및 열 너비 설정

inherit: 테이블 레이아웃 속성의 값이 상위 요소에서 상속되도록 지정합니다.

3.table-layout 속성 설명

이 속성은 테이블 레이아웃을 완성하는 데 사용되는 레이아웃 알고리즘을 지정합니다.
고정 레이아웃(고정) 알고리즘은 더 빠르지만 그다지 유연하지는 않습니다.
자동 레이아웃(자동) 알고리즘은 느리지만 기존 HTML 테이블을 더 잘 반영합니다.

참고:

모든 브라우저는 테이블 레이아웃 속성을 지원하지만 모든 버전의 Internet Explorer(IE8 포함)는 이를 지원하지 않습니다. 가치 "상속"! ! !

2. 두 가지 레이아웃 방법 소개(자동 레이아웃과 고정 레이아웃)

1. 자동 레이아웃(자동)

자동 레이아웃에서는 열의 너비가 열 셀에서 줄 바꿈 없이 가장 넓은 내용으로 설정되므로 셀 너비가 유효하지 않습니다.

자동 레이아웃 알고리즘은 최종 레이아웃을 결정하기 전에 테이블의 모든 콘텐츠에 액세스해야 하기 때문에 때때로 속도가 느려질 수 있습니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自动布局</title>
		<style>
			table.ex {table-layout: auto}
		</style>
	</head>

	<body>
		<table class="ex" border="1" width="100%">
			<tr>
				<td width="100px">td里的内容，我会全部显示:我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码</td>
				<td width="100px">我是测试代码</td>
			</tr>
		</table>

	</body>

</html>

로그인 후 복사

렌더링:

CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)

에 표시된 대로 위 그림 표시: 자동 레이아웃에서는 td 태그의 너비와 높이가 td 태그의 콘텐츠 양에 따라 변경됩니다.

2. 고정 레이아웃(고정)

자동 레이아웃과 비교하여 고정 레이아웃을 사용하면 브라우저가 테이블 너비, 열에만 의존하여 테이블을 더 빠르게 레이아웃할 수 있습니다. 너비, 테이블 테두리 너비 및 셀 간격은 셀의 내용에 관계없이 고정된 테이블 레이아웃을 사용하여 사용자 에이전트가 첫 번째 행을 수신하자마자 테이블을 표시할 수 있습니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定布局</title>
		<style>
			table.ex {table-layout: fixed}
		</style>
	</head>
	<body>
		<table class="ex" border="1" width="500px">
			<tr>
				<td width="">1000000000000000000000000000000</td>
				<td width="">我是测试代码</td>
			</tr>
		</table>
	</body>
</html>

로그인 후 복사

렌더링:

CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)