이 문제는 크롬에서는 발견되지 않으나, 익스플로러에서는 자주 발견된다.
table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지한다.
보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어난다.
| 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다. |
테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어난다.
그런데 위처럼 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어 나지만
홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생한다
| http://teck10.tistory.com/15111111111111111 |
위의 테이블과 똑같이 200픽셀로 너비를 지정했음에도 테이블이 밀려난다.
그럼 이것을 어떻게 해결하느냐
table-layout 속성값을 fixed로 지정하면 테이블의 너비가 200픽셀로 고정하면 된다.
| http://teck10.tistory.com/15111111111111111 |
그러나 아래와 같이 200 픽셀까지만 보이고 그 이상은 상자에서 튀어 나가는 현상이 발생한다.
줄바꿈이 일어나게 할려면 word-break:break-all; 속성을 추가해 주면 된다.
| http://teck10.tistory.com/15111111111111111 |
그러면 위 처럼 테이블은 고정되고 자연스럽게 줄바꿈이 일어난다.