집 > 기사 > 웹 프론트엔드 > CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)

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

青灯夜游원래의: 2018-09-15 11:45:363042검색

프런트엔드 웹페이지 개발에서는 전체 페이지 작성을 빠르게 완료하기 위해 일부 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의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)

위와 같습니다. 테이블의 너비를 500px로 설정한 후, 테이블의 두 td 태그(셀)의 너비가 자동으로 동일하게 나누어져 첫 번째 td 태그(셀)의 너비를 넘는 내용이 오버플로되는 것을 볼 수 있습니다. 두 번째 td 라벨(셀).

고정 레이아웃에는

td 라벨(셀) 너비에 대한 두 가지 참고사항(셀):

참고:

일반적으로 표의 내용이 중국어인 경우 내용도 너무 긴 텍스트가 자동으로 줄바꿈됩니다. 하지만 표의 내용이 영어나 숫자인 경우, 내용이 너무 길면 텍스트가 셀 외부에 떠 있게 됩니다. 즉, 내용이 자동으로 줄 바꿈되지 않습니다. 이때

속성을 사용하세요. CSS3의 word-wrap: break-word;

및 word-break:break-all;을 함께 사용하여 문제를 해결할 수 있습니다.

위 내용은 CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 html auto break 继承 table td 算法 word

성명：

이전 기사：CSS 사용 방법에 대한 자세한 설명:hover 의사 클래스 선택기(코드 포함)다음 기사：CSS 사용 방법에 대한 자세한 설명:hover 의사 클래스 선택기(코드 포함)