CSS의 table-layout 속성은 브라우저가 테이블을 어떻게 렌더링하고 배치할지 결정하는 데 사용됩니다. 이 속성을 활용하면 셀의 너비가 내용에 따라 달라지는 것을 방지하고, 일관된 테이블 구조를 유지할 수 있습니다.
table-layout 속성의 값
table-layout 속성은 다음 세 가지 값을 가질 수 있습니다.
- auto: 기본값으로, 브라우저가 셀의 내용에 따라 열 너비를 자동으로 계산합니다. 내용이 길어지면 해당 열도 함께 넓어집니다.
- fixed: 테이블과 각 열의 너비가 지정된 값에 고정됩니다. 셀의 내용이 길더라도 열 너비는 변하지 않으며, 내용은 줄바꿈되거나 넘칠 수 있습니다. 렌더링 속도가 빨라 대용량 테이블에 유리합니다.
- inherit: 부모 요소의 table-layout 값을 상속받습니다.
예제 코드
다음 코드를 실행하면 table-layout 속성의 auto 값과 fixed 값의 차이를 직접 확인할 수 있습니다.
<html>
<head>
<style>
table.auto {
table-layout: auto
}
table.fixed{
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>실행 결과 설명
위 예제에서 첫 번째 테이블에는 auto 값이 적용되어, 긴 숫자 문자열이 있는 첫 번째 셀의 내용에 맞춰 열 너비가 자동으로 조정됩니다. 반면 두 번째 테이블에는 fixed 값이 적용되어, 지정된 너비(20%, 40%, 40%)를 그대로 유지하며 긴 내용은 셀 안에서 처리됩니다.
이처럼 table-layout: fixed는 열 너비를 일정하게 유지해야 하는 데이터 테이블에서 특히 유용하며, auto는 내용에 따라 유연하게 크기를 조절해야 할 때 적합합니다.