테이블 깨짐 방지

글자가 너무 길거나 내용이 많아서 화면이 깨지는 경우가 있다.
서버나 클라이언트 스크립트를 이용해서 내용을 줄이는 방법을 사용하는데
화면단에서 처리하는 방법을 적어 본다.

1. table-layout:fixed
2. overflow:hidden
3. nowrap -or- nobr
   

<table border="1" width="100%" style="table-layout:fixed;"> <tr> <td width="30%" style="overflow:hidden;"> <nobr>overflow:hidden; nobr overflow:hidden; nobr overflow:hidden; nobr</nobr> </td> <td width="70%" style="overflow:hidden;"> <nobr>overflow:hidden; nobr overflow:hidden; nobr overflow:hidden; nobr</nobr> </td> </tr> <tr> <td width="30%" style="overflow:hidden;" nowrap> overflow:hidden; nowrap overflow:hidden; nowrap overflow:hidden; nowrap </td> <td width="70%" style="overflow:hidden;" nowrap> overflow:hidden; nowrap overflow:hidden; nowrap overflow:hidden; nowrap </td> </tr> <tr> <td style="text-overflow:ellipsis; overflow:hidden;"> <nobr>text-overflow:ellipsis; overflow:hidden; nobr text-overflow:ellipsis; overflow:hidden; nobr </nobr> </td> <td style="text-overflow:ellipsis; overflow:hidden;"> <nobr>text-overflow:ellipsis; overflow:hidden; nobr text-overflow:ellipsis; overflow:hidden; nobr </nobr> </td> </tr> <tr> <td style="text-overflow:ellipsis; overflow:hidden;" nowrap> text-overflow:ellipsis; overflow:hidden; nowrap text-overflow:ellipsis; overflow:hidden; nowrap </td> <td style="text-overflow:ellipsis; overflow:hidden;" nowrap> text-overflow:ellipsis; overflow:hidden; nowrap text-overflow:ellipsis; overflow:hidden; nowrap </td> </tr> </table>
text-overflow는 IE에서만 사용가능
text-overflow:ellipsis 는 내용이 길어지면 ... 표시를 보여준다.

(Xenocode의 브라우저로 테스트함, FF3, IE8, IE6, Safari3, Opera9)