CSS 테이블 레이아웃 속성
예시
다른 테이블 레이아웃 알고리즘 설정:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
정의 및 사용
속성 은 table-layout테이블 셀, 행 및 열을 배치하는 데 사용되는 알고리즘을 정의합니다.
팁: 테이블 레이아웃의 주요 이점: 고정; 테이블이 훨씬 빠르게 렌더링된다는 것입니다. 큰 테이블에서 사용자는 브라우저가 전체 테이블을 렌더링할 때까지 테이블의 어떤 부분도 볼 수 없습니다. 따라서 table-layout: fixed를 사용하는 경우 브라우저가 테이블의 나머지 부분을 로드하고 렌더링하는 동안 사용자는 테이블 상단을 보게 됩니다. 이것은 페이지가 훨씬 더 빨리 로드된다는 인상을 줍니다!
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
CSS 구문
table-layout: auto|fixed|initial|inherit;
속성 값
| Value | Description | Play it |
|---|---|---|
| auto | Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout | |
| fixed | Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 테이블
HTML DOM 참조: tableLayout 속성