table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.

보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr> <td>셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td> </tr> </table>

테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다.

셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.

반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr> <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table>

위의 테이블과 똑같이 200픽셀로 너비를 지정했음에도 테이블이 밀려나는 걸 확인할 수 있습니다.

http://www.homejjang.com/09/border_collapse.php

table-layout 속성값을 fixed로 지정하면 테이블의 너비가 200픽셀로 고정됩니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed;"> <tr> <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table>

그러나 아래와 같이 200 픽셀까지만 보이고 그 이상은 화면에 출력되지 않는 현상이 발생합니다.

http://www.homejjang.com/09/border_collapse.php

줄바꿈이 일어나게 할려면 word-break:break-all; 속성을 추가적으로 지정해 주면 됩니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;"> <tr> <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table>

그러면 아래와 같이 테이블은 고정되고 자연스럽게 줄바꿈이 일어납니다.

http://www.homejjang.com/09/border_collapse.php