English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체 목록

CSS 테이블-layout 속성 사용 방법 및 예제

table-layout CSS 속성은 테이블 셀, 행 및 열의 레이아웃에 사용되는 알고리즘을 지정합니다.

아래 테이블은 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 설명합니다.

기본 값:auto
적용:테이블과 내부 테이블 요소
thừa kế:없음
애니메이션 가능:아니요。참조: 애니메이션 속성
버전:CSS 2、3
JavaScript 문법:object.style.tableLayout="fixed"

table-layout 사용 문법

이 속성의 문법은 다음과 같습니다:

table-layout: auto | fixed | initial | inherit

아래 예제는 table을 사용하는 방법을 보여줍니다.-layout 속성.

  table {
   width: 250px;
   table-layout: fixed;
  }
테스트해 보세요‹/›

추천:고정된 테이블 레이아웃 알고리즘은 자동 테이블 레이아웃 알고리즘보다 브라우저가 테이블을 레이아웃하는 데 더 빠르게 할 수 있도록 합니다. 첫 번째 행을 받아들이면 브라우저는 테이블을 표시 시작할 수 있습니다...

속성 값

아래 테이블은 이 속성의 값을 설명합니다.

설명
auto자동 테이블 레이아웃 알고리즘은 테이블 레이아웃에 사용됩니다. 테이블과 셀의 너비는 셀의 내용에 따라 결정됩니다. 이는 기본 값입니다.
fixed

고정된 테이블 레이아웃 알고리즘은 테이블 레이아웃에 사용됩니다.

  • 테이블의 수평 레이아웃은 셀의 내용에 따라 결정되지 않습니다; 이는 테이블의 너비, 열의 너비 및 경계선이나 셀의 간격에 따라 결정됩니다.

  • 테이블과 열의 너비는 table과 col 요소의 너비 또는 셀의 첫 번째 행의 너비로 설정됩니다.

initial이 속성을 기본 값으로 설정합니다.
inherit지정된 경우, 관련 요소는 부모 요소 table의 속성을 사용합니다.-layout 속성 값.

주의:자동 테이블 레이아웃 알고리즘은 많은 행이나 열을 가진 테이블의 표시 속도를 줄입니다. 이는 브라우저가 최종 레이아웃을 결정하기 전에 테이블의 모든 내용에 접근할 수 있도록 요구합니다.

브라우저 호환성

table-layout 속성의 브라우저 호환성, 아래 테이블에서의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

  • Firefox 1+

  • Google Chrome2+

  • Internet Explorer 5+

  • Apple Safari 1+

  • Opera 7+

더 읽어보기

다음 내용에 대한 튜토리얼을 참조하세요:HTML 테이블CSS 테이블

관련 속성:width