목차
- table-layout 예제 - 너비 결정 방식
- table-layout 정의
- table-layout 구문
- table-layout:fixed 이슈 - 긴 영문 문자열로 인한 레이아웃 깨짐 방지
table-layout 예제 - 너비 결정 방식
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th,td {
border: 1px solid black;
}
table.a {
table-layout: auto;
width: 200px;
}
table.b {
table-layout: fixed;
width: 200px;
}
table.c {
table-layout: auto;
width: 100%;
}
table.d {
table-layout: fixed;
width: 100%;
}
</style>
<h2>table-layout: auto; width: 200px:</h2>
<table class="a">
<tr>
<th>코딩언어</th>
<th>기능</th>
<th>난이도</th>
</tr>
<tr>
<td>HTML</td>
<td>기본틀</td>
<td>1</td>
</tr>
<tr>
<td>CSS</td>
<td>디자인</td>
<td>2</td>
</tr>
<tr>
<td>JS</td>
<td>동작기능</td>
<td>3</td>
</tr>
</table>
<h2>table-layout: fixed; width: 200px:</h2>
<table class="b">
<tr>
<th>코딩언어</th>
<th>기능</th>
<th>난이도</th>
</tr>
<tr>
<td>HTML</td>
<td>기본틀</td>
<td>1</td>
</tr>
<tr>
<td>CSS</td>
<td>디자인</td>
<td>2</td>
</tr>
<tr>
<td>JS</td>
<td>동작기능</td>
<td>3</td>
</tr>
</table>
<h2>table-layout: auto; width: 100%:</h2>
<table class="c">
<tr>
<th>코딩언어</th>
<th>기능</th>
<th>난이도</th>
</tr>
<tr>
<td>HTML</td>
<td>기본틀</td>
<td>1</td>
</tr>
<tr>
<td>CSS</td>
<td>디자인</td>
<td>2</td>
</tr>
<tr>
<td>JS</td>
<td>동작기능</td>
<td>3</td>
</tr>
</table>
<h2>table-layout: fixed; width: 100%:</h2>
<table class="d">
<tr>
<th>코딩언어</th>
<th>기능</th>
<th>난이도</th>
</tr>
<tr>
<td>HTML</td>
<td>기본틀</td>
<td>1</td>
</tr>
<tr>
<td>CSS</td>
<td>디자인</td>
<td>2</td>
</tr>
<tr>
<td>JS</td>
<td>동작기능</td>
<td>3</td>
</tr>
</table>
결과보기
table-layout 정의
테이블 (셀, 행, 열) 레이아웃하는 데 사용.
1.
table-layout: fixed; 속성 장점 2가지
①
테이블이 훨씬 빠르게 렌더링 되는 느낌 줌.
즉,
큰 테이블에서 브라우저가 전체 테이블을 렌더링 할 때까지 사용자는 테이블의 일부를 볼 수 없는데,
table-layout : fixed 사용 시 브라우저가 테이블의 나머지 부분 로드 동안 테이블 상단을 볼 수 있음.
②
너비 지정한 테이블 레이아웃이 긴 영문문자열로 인해 깨지는 현상 차단 가능.
즉,
한글 경우엔 지정 너비 안에서 자연스럽게 줄바꿈하나,
긴 영문 문자열 경우엔 테이블 레이아웃 늘려버리는데,
table-layout:fixed 속성 사용하면 이 현상 차단 가능.
2.
- 기본값: auto
- 상속여부 : X
- 애니효과: X
- CSS버전: CSS2
- JS구문: object.style.tableLayout="fixed";
3.
주요 최신 브라우저 모두 지원.
4. MDN table-layout 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table-layout 구문
selector {table-layout: auto|fixed|initial|inherit;}
[속성값]
auto
자동 레이아웃 (기본값).
가장 긴 셀 내용이 셀 너비 결정.
fixed
고정 레이아웃. 테이블 및 열 너비는 테이블 및 열 너비 또는 첫 번째 셀 행 너비로 설정. 다른 행의 셀은 열 너비에 영향 안 미침. 첫 번째 행에 너비가 없으면 셀 내부의 내용에 관계없이 열 너비가 테이블에서 동일하게 나뉨.
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.
table-layout:fixed 이슈 - 긴 영문 문자열로 인한 레이아웃 깨짐 방지
<style>
table,th,td {border:1px solid red;}
table {width:100px;}
table.c {table-layout:fixed;}
table.d {table-layout:fixed; word-break:break-all;}
table.e {table-layout:fixed; overflow:hidden;}
</style>
<table class='a'>
<tr>
<td>a.홈짱닷컴 홈페이지 제작관리 유지보수 강의</td>
</tr>
</table>
<table class='b'>
<tr>
<td>b.https://homzzang.com/b/css</td>
</tr>
</table>
<table class='c'>
<tr>
<td>c.https://homzzang.com/b/css</td>
</tr>
</table>
<table class='d'>
<tr>
<td>d.https://homzzang.com/b/css</td>
</tr>
</table>
<table class='e'>
<tr>
<td>e.https://homzzang.com/b/css</td>
</tr>
</table>
결과보기
