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픽셀로 너비를 지정했음에도 테이블이 밀려나는 걸 확인할 수 있습니다.
|
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 픽셀까지만 보이고 그 이상은 화면에 출력되지 않는 현상이 발생합니다.
|
줄바꿈이 일어나게 할려면 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/