CSS table-layout 속성 – 테이블 너비 레이아웃 구현 방식 선택

`table-layout` 속성의 이해

table-layout 속성은
테이블의 셀·행·열의 너비를 어떻게 구현할지에 대한 브라우저의 레이아웃 방식을 선택하는 속성입니다.

'자동 방식'이나 '고정 방식' 중 하나를 선택할 수 있습니다.

형식 구문

구문

CSS

/* 키워드 값 */
table-layout: auto;
table-layout: fixed;

/* 전역 값 */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;

데모

다음의 CSS 데모를 통해서 table-layout 속성의 설정으로 테이블의 셀·행·열의 너비에 대해,
브라우저가 '자동 방식'과 '고정 방식' 레이아웃을 구현하는 차이를 확인해 보세요.

CSS 데모: table-layout 데모 버튼을 클릭해 보세요!

이름	국가
홍길동	대한민국
Sir Tim Berners-Lee	영국
Albert Einstein	독일

형식 정의

table-layout 속성의 형식 정의
초깃값	`auto`
적용 요소	`<table>` (`display` 속성이 `table` 또는, `inline-table`로 설정되어 있는 요소)
상속	아니오
애니메이션	아니오

값

table-layout 속성의 값
`auto`	테이블의 레이아웃을 '자동 방식'( automatic table layout algorithm)으로 구현합니다.
`fixed`	테이블의 레이아웃을 '고정 방식'(fixed table layout algorithm)으로 구현합니다.

이 두 키워드 값의 구현 방식은 아래에 설명되어 있습니다.

`auto` - '자동 방식'( automatic table layout algorithm)

자동 방식'( automatic table layout algorithm)으로 구현됩니다.
테이블(<table>)과 셀(<th>, <td>)의 너비가 콘텐츠에 맞게 조정됩니다.
<table> 요소에 width 속성을 사용하여 명시적으로 지정한 너비가 있을 경우, 열(세로 방향, column)의 너비는 각 셀의 최소 콘텐츠 너비(min-content)와 각 셀의 최대 콘텐츠 너비(max-content) 중 하나를 테이블의 너비를 고려해서 자동으로 결정합니다. 더 자세한 구현 방식에 대한 정보는 명세서 - Automatic table layout을 참고하세요.

대부분의 브라우저는 기본적으로 이 방식을 사용합니다.

auto 값을 사용하면 테이블의 셀, 행, 열의 너비를 CSS로 명시적으로 지정하지 않아도, 브라우저가 콘텐츠에 따라 자동으로 조정하므로 편리합니다.

`fixed` - '고정 방식'( fixed table layout algorithm)

'고정 방식'( fixed table layout algorithm)으로 구현됩니다.

이 값을 사용할 때 테이블의 너비는 <table> 요소에 width 속성을 사용하여 명시적으로 지정해야 합니다.
width 속성의 값이 auto로 설정되거나 지정되지 않으면 브라우저는 '자동 방식'( automatic table layout algorithm)을 사용하며, 이 경우 fixed 값은 효과가 없습니다.

'고정 방식'( fixed table layout algorithm)을 사용하면 테이블의 가로 레이아웃, 즉 너비가 셀의 콘텐츠에 따라 달라지지 않습니다.

그러나, 테이블의 너비, 열(세로방향, column) 너비, 테두리(border), 셀 간격(border-spacing)에 설정한 값에 따라서는 달라집니다.

'고정 방식'( fixed table layout algorithm)의 구현에서 각 열(세로 방향, column)의 너비는 다음과 같이 결정됩니다.

width 속성을 사용하여 명시적으로 지정한 너비가 있는 <col> 요소는 해당 열(세로 방향, column)의 너비를 설정합니다.
그렇지 않으면, width 속성에 auto가 아닌 값을 가진 첫 번째 행(가로 방향, row)의 셀이 해당 열(세로 방향, column)의 너비를 결정합니다. 셀이 두 개 이상의 열(세로 방향, column)에 걸쳐 있는 경우 너비는 열(세로 방향, column)에 걸쳐 나뉩니다.
나머지 열(세로 방향, column)은 테두리(border)나 셀 간격(border-spacing)을 뺀 나머지 테이블의 너비 공간을 균등하게 나눕니다. 이는 명시적으로 설정된 너비에 따라 달라지기 때문입니다.

그러면 테이블의 너비는 <table> 요소의 width 속성 값과 열(세로 방향, column) 너비의 합계(셀 간격 또는 테두리 포함) 중 큰 값입니다. 테이블이 열보다 넓으면 추가 공간이 열에 분산됩니다.

오버플로(overflow, 경계를 넘어섬)되는 콘텐츠가 있는 모든 셀은 overflow 속성을 사용하여 오버플로 콘텐츠를 잘라낼지 여부를 결정합니다.

fixed 값을 사용하면 테이블의 너비가 콘텐츠와 관계없이 고정된 너비 규칙에 따라 설정되므로, 원하는 디자인을 정확하게 구현할 수 있습니다.

예제

HTML

<table class="auto-table-layout">
    <caption>auto</caption>
    <tr>
        <th scope="col">이름</th>
        <th scope="col">국가</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>대한민국</td>
    </tr>
    <tr>
        <td>Sir Tim Berners-Lee</td>
        <td>영국</td>
    </tr>
    <tr>
        <td>Albert Einstein</td>
        <td>독일</td>
    </tr>
</table>
<table class="fixed-table-layout">
    <caption>fixed</caption>
    <tr>
        <th scope="col">이름</th>
        <th scope="col">국가</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>대한민국</td>
    </tr>
    <tr>
        <td>Sir Tim Berners-Lee</td>
        <td>영국</td>
    </tr>
    <tr>
        <td>Albert Einstein</td>
        <td>독일</td>
    </tr>
</table>

CSS

.auto-table-layout {
    table-layout: auto;
}
.fixed-table-layout {
    table-layout: fixed;
}

table {
    display: inline-table;
    width: 130px;
    border-collapse: collapse;
    margin: 1em;
}
th, td {
    border: 1px solid;
    padding: 0.4em 1em;
    text-align: center;
}
th {
    background-color: #e6e6e6;
}

실제 적용된 모습

설명

table-layout 속성의 값이 auto로 설정되어 있는 테이블의 경우, 셀(<th>, <td>)의 너비가 콘텐츠에 맞게 조정됩니다. 열(세로 방향, column)의 너비도 셀의 영향을 받아 너비가 자동으로 조정됩니다.
table-layout 속성의 값이 fixed로 설정되어 있는 테이블의 경우, 해당 <table> 요소의 width 속성으로 설정된 130px의 너비 공간을 각 열(세로 방향, column)이 균등하게 나눕니다.