테이블 깨짐 방지

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