테이블 줄바꿈과 줄바꿈막기

1. jQuery를 사용하는 웹페이지 (1024 X 768 사이즈)

2. POPUP창을 통해서 가로 800의 팝업창을 띄우도록 구성

3. 출력되는 테이블 구성이 좀 유별남..
1) 그림으로 표현하자면 이렇다..

    2) 특징은 내용1,2,3 모두다 상당한 길이를 갖는 내용일 수 있다는 것이다.
그래서 전체적으로 레이블로 구성했다.. 걍 <td></td>로 묶으니
적절치 않은 것 같아서..
3) 결론적으로 이야기하면 가로길이가 총 800PX인데.. 그 이상 초과될 수 있다는 뜻..
4) 그래서 이게 늘어나면 이렇게 깨지더라.. (이것 때문에 정말 힘들었다.. ㅠㅠ)

5) 게다가 내용3은 짤려서 더이상 보여지지도 않는 것임..
그래서 수도 없이 PX을 바꿔주면서 찾아다녔는데.. 안되더라..
6) 내용1은 줄바꿈이 되도록 내용2는 오른쪽으로 늘어나도록
내용3도 오른족으로 늘어나도록
이게 처음에는 가능하지 않은 줄 알았다.. 그래서.. 좀 구글링을 해봤다..

4. 해결책을 찾음..
1) 내용1의 <td>에는 CSS속성 중에 word-break:break-all;
white-space:pre-wrap;를 추가함
사이즈에 맞게 줄바꿈을 하는 속성이라고 하는데.. 아직 실력이 부족하여..
디테일한 부분은 감이 안 옴..
2) 내용2,3의 <td>에는 CSS속성 중에 white-space: nowrap; 을 추가함..
사이즈를 무시하고 줄바꿈 하지 않는 속성이라고 한다..

5. 그런데.. 이상한게.. 그런데도 계속 깨지더라.. 그래서 포기하려고 하는 와중에..
우리 과장님께서 찾아주셨다.. 테이블 자체에 속성을 넣어야 하더라..
그 속성은 바로.. <table>의 CSS속성 중에 table-layout:fixed; 이다..
<td>에만 넣는 다고 되는게 아니라
<table>에서 일그러지지 않도록 잡아주는 속성이다.

6. 결론적으로는 해결되었다..
1) <table> 의 table-layout:fixed;
2) 줄바꿈 줄 : <td>의 word-break:break-all; white-space:pre-line;
(지금 보니깐.. word-break는 필요없을 듯 하긴하다.. 직접 테스트 해보시길..)
3) 줄안바꿈 줄 : <td>의 white-space: nowrap;

나날이 늘어가는 야근과 함께 향상되는 나의 실력.. ㅠㅠ