이제 개발자(라기 보다는 그냥 단순 코더) 2년차인 초급입니다~ <div><br></div> <div>테이블을 만들다가 가로 세로 열을 고정시키고 데이터 부분이 움직이는 Table을 만들었는데요.</div> <div><br></div> <div>문제는 아래와 같습니다</div> <div><br></div> <div><table></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div style="<span style="font-size:9pt;">float: left;"</span><span style="font-size:9pt;">></span></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><table></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div> 좌측 헤더테이블 (고정열, 크기 고정)</div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div> 좌측 컨텐츠 (고정열, 크기 고정)</div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></table></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div style="float: left;"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><table></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div> 우측 헤더 테이블 (고정열, 화면크기에 맞춰 resize) </div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div> 우측 컨텐츠 (스크롤<span style="font-size:9pt;">, 화면크기에 맞춰 resize</span><span style="font-size:9pt;">) </div></span></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></tr></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></table></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></td></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></tr></div> <div></table></div> <div><br></div> <div>모양은 이런식이구요 </div> <div><br></div> <div>javascript로 window.addEventReceiver('resize', function ());</div> <div>추가 해줬습니다.</div> <div><br></div> <div>다만 문제는 resize시에 화면이 한번에 대폭 줄어들 경우에 float가 left로 잡힌 div가 줄바뀜 현상이 일어납니다...</div> <div><br></div> <div>조금씩 화면을 줄일때는 이상이 없지만 한번에 화면 가로폭이 확 줄어들면 발생하더라구요.....</div> <div><br></div> <div>실행 화면은 아래와 같습니다.</div> <div><br></div> <div><div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201611/147859274550df6df5f3df41fc9f1ffa3c06605717__mn638939__w1242__h391__f112501__Ym201611.png" width="800" height="252" alt="제목 없음.png" class="chimg_photo" style="border:none;" filesize="112501"></div> <div style="text-align:left;">주황색 테두리가 세로 스크롤시 고정, 파란 테두리가 가로 스크롤시 고정되는 열이에요.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">화면 resize될때에 파란테두리는 크기가 고정이라 상관이 없는데 오른쪽 편은 Div의 width가 커졌다 작아졌다 하는데요... </div> <div style="text-align:left;"><br></div> <div style="text-align:left;">갑자기 화면 크기를 작게 줄이면 아래같은 경우가 발생해요..</div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201611/14785927973977a2d7f5f14b3899545b4f5aa820bb__mn638939__w705__h642__f69249__Ym201611.png" width="705" height="642" alt="제목 없음1.png" style="border:none;" filesize="69249"></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">아래는 제가 만든 파일인데요...</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">리사이즈 될때 우측 헤더와 컨텐츠 열 길이도 어긋나네요... ㅠㅠ</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">도움 요청합니다 ㅠㅠ</div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div><br><a target="_blank" href="http://hkhub.tistory.com/attachment/
[email protected]" target="_blank"><img src="" alt="" style="vertical-align:middle;"> HtmlPage1.html</a></div>