테이블 크기 고정시키기

자동 줄바꿈을 통한 테이블 크기 고정. 테이블 작업을 하다가 글의 내용이 길어지면 지정된 테이블의 크기가 늘어나는 현상이 있을 수 있습니다. 이럴 때 테이블의 크기를 고정시키고 자동으로 줄바꿈을 해주는 기능입니다.

<table> 태그의 아래의 구문을 넣습니다.

style="table-layout:fixed;"

[ ------------------------------ 예문 ------------------------------ ]
<table style="table-layout:fixed;">

● 적용 시키고자 하는 셀에 아래의 구문을 넣습니다.
style="word-break:break-all;"

[ ------------------------------ 예문 ------------------------------ ]
<td style="word-break:break-all;">

 

 

그러나 문제가 없는 것은 아닙니다.

영어 글자는 띄어쓰기 하기 전에는 아무리 강력한 방법을 써도 테이블을 밀고 나갑니다.

한 예로 이메일 주소가 그렇습니다.

문서 작성 도중 테이블 td 안에 이메일이 길어 틀이 깨어지는 경우가 많았습니다.

생각해 낸 방법이 역시 무식하지만

눈에 안보이는 1px 흰 그림을 적당한 크기로 늘려서 빈 tr 안의 td 공간들을 정절히 확보하는 것입니다.

아무리 밀려해도 밀리지 않고 자리를 잘 잡아줍니다.