HTML5+CSS3 - 테이블 폭 고정 및 <pre>태그 줄바꿈

<table> 을 사용할 때 내용이 테이블의 폭보다 길면 테이블 width를 늘려서 표현하게 된다.

width 속성으로 폭을 명시해도 밀려나는건 마찬가지.

테이블 폭을 고정하기 위해서는 테이블 태그에 style 속성의 "table-layout:fixed"를 사용하면 된다.

<table width="700" border="0" cellspacing="0" class="border-box" style="table-layout:fixed">

하지만 이것도 문제가 있다.

테이블 모양은 고정되어 표현이 되지만 내용은 표 옆에까지 쭉 출력된다.

내용이 폭보다 길 때, 줄바꿈이 일어나게 하려면 style 속성의 "word-break:break-all"을 함께 사용하면 된다.

<table width="700" border="0" cellspacing="0" class="border-box" style="table-layout:fixed;word-break:break-all;">

헌데, 표에 표시할 내용이 여러줄일 경우에, 줄바꿈을 표시하기 위해서 <pre> 태그를 사용할 수 있는데,

<pre> 태그가 사용되었으면 위의 word-break 속성이 먹히지 않는다.

해서 줄바꿈과 표의 내용에 딱 맞추기 위한 방법으로

<pre> 태그에 style 속성의 "white-space:pre-wrap"을 사용할 수 있다.

<pre style="white-space: pre-wrap;"> ... 내용 ... </pre>

이제 내용의 줄바꿈도 적용되고, 표의 폭을 고정했으며, 표 밖으로 내용이 넘어가지 않는다.