묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
table-layout:fixed 문제(게시판)
2008.06.07 20:41
제로보드 기본 게시판에 table-layout:fixed가 적용됐죠.
근데 이게 div에 스크롤바 적용 시 IE6.0과 FF에서 다르게 작동하더라구요.
아래 예를 보세요.
FF에서는 width:100%에 table-layout:fixed가 적용되어도 스크롤바가 제 영역 안에서 자리를 차지하는데요.
IE6.0에서는 width:100%가 스크롤바영역을 남겨두지 않더라구요. 그래서 스크롤바가 그 옆에 생기고..
rightcolumn 부분이 그림과 같이 아래로 밀리내요.
그렇다고 width:90% 이런식으로 변경하면..스크롤바가 IE6.0에서는 제 영역 안으로 들어오겠지만..
FF에서는 테이블과 스크롤바 사이에 그만큼 여백이 생겨버리네요.
이거 IE6.0에서도 FF처럼 table에 적용된 width:100%가 스크롤바영역은 남겨두게하는 방법 없을까요?
도움 부탁드립니다.
<파이어폭스> <IE6.0>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!--%import("css/test.css")-->
<div id="wrap">
<div id="top"></div>
<div id="bottom">
<div id="left">
<table class="test"><tr><td>
동해물과 백두산
</td></tr></table>
</div>
<div id="right"></div>
</div>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#wrap {width:400px; height:200px; background-color:#000000; margin:0; padding:0; border:none;}
#top {width:400px; height:100px; background-color:#3300ff;}
#left {float:left; width:200px; height:100px; background-color:#ffffcc; overflow-y:scroll; }
#right {float:right; width:200px; height:100px; background-color:#ffcccc;}
.test {width:100%; table-layout:fixed;}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
근데 이게 div에 스크롤바 적용 시 IE6.0과 FF에서 다르게 작동하더라구요.
아래 예를 보세요.
FF에서는 width:100%에 table-layout:fixed가 적용되어도 스크롤바가 제 영역 안에서 자리를 차지하는데요.
IE6.0에서는 width:100%가 스크롤바영역을 남겨두지 않더라구요. 그래서 스크롤바가 그 옆에 생기고..
rightcolumn 부분이 그림과 같이 아래로 밀리내요.
그렇다고 width:90% 이런식으로 변경하면..스크롤바가 IE6.0에서는 제 영역 안으로 들어오겠지만..
FF에서는 테이블과 스크롤바 사이에 그만큼 여백이 생겨버리네요.
이거 IE6.0에서도 FF처럼 table에 적용된 width:100%가 스크롤바영역은 남겨두게하는 방법 없을까요?
도움 부탁드립니다.
<파이어폭스> <IE6.0>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!--%import("css/test.css")-->
<div id="wrap">
<div id="top"></div>
<div id="bottom">
<div id="left">
<table class="test"><tr><td>
동해물과 백두산
</td></tr></table>
</div>
<div id="right"></div>
</div>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#wrap {width:400px; height:200px; background-color:#000000; margin:0; padding:0; border:none;}
#top {width:400px; height:100px; background-color:#3300ff;}
#left {float:left; width:200px; height:100px; background-color:#ffffcc; overflow-y:scroll; }
#right {float:right; width:200px; height:100px; background-color:#ffcccc;}
.test {width:100%; table-layout:fixed;}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~