CSS table-layout 속성

정의와 사용법

tableLayout 속성은 표 셀, 행, 칼럼의 알고리즘 규칙을 표시합니다.

고정 표 레이아웃:

고정 표 레이아웃은 자동 표 레이아웃에 비해 브라우저가 표를 레이아웃하는 데 더 빠르게 할 수 있습니다.

고정 표 레이아웃에서, 수평 레이아웃은 표 너비, 칼럼 너비, 표 경계 너비, 셀 간격에만 의존하며, 셀 내용과는 관계가 없습니다.

고정 표 레이아웃을 사용하면 사용자代理가 첫 번째 행을 받아들이면 표를 표시할 수 있습니다.

자동 표 레이아웃:

자동 표 레이아웃에서, 칼럼 너비는 칼럼 셀에 접근하지 않는 가장 넓은 내용으로 설정됩니다.

이 알고리즘은 종종 느릴 수 있으며, 이는 최종 레이아웃을 결정하기 전에 표의 모든 내용을 방문해야 한다는 것 때문입니다.

설명

이 속성은 표 레이아웃을 완료하는 데 사용하는 레이아웃 알고리즘을 지정합니다. 고정 레이아웃 알고리즘은 빠르지만 유연하지 않으며, 자동 알고리즘은 더 느리지만 전통적인 HTML 표를 더 잘 반영합니다.

다른 것을 참조하세요:

CSS 강의:CSS 테이블

HTML DOM 참조 매뉴얼:tableLayout 속성

예제

표 레이아웃 알고리즘 설정:

table
  {
  table-layout:fixed;
  }

개인적으로 시도해 보세요

CSS 문법

table-layout: auto|fixed|initial|inherit;

속성 값

값 설명
automatic 기본. 칼럼 너비는 셀 내용으로 설정됩니다.
fixed 칼럼 너비는 표 너비와 칼럼 너비로 설정됩니다.
inherit table-layout 속성의 값을 부모 요소에서 상속해야 합니다.

기술 세부 사항

기본 값: auto
상속성: yes
버전: CSS2
JavaScript 문법: object.style.tableLayout="fixed"

더 많은 예제

표의 레이아웃 설정
이 예제에서 표의 레이아웃을 설정하는 방법을 보여줍니다.

브라우저 지원

표中的 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
14.0 5.0 1.0 1.0 7.0