이야기 마을

숨길경우는 scroll을 hidden으로 수정


<div style="width:730px; height: 488px;overflow-x:scroll; overflow-y:scroll;"></div>



=======================================
이거 참 괜찮은거 같다 스크롤이 필요할때가 있는데 그거땜에 프레임쓰기도 그렇고
따로 만들어서 쓰기도 그렇고 할튼 맘에 드는 스타일 -0-//

아래글에 있는 스타일중에 두가지를 테이블에 먹여서 문자열이 잘리는 효과를......

아래소스를 HTML 파일로 저장하여 테스트

=================================================
<TABLE WIDTH="100%" BORDER="1" CELLSPACING="2" CELLPADDING="2" style="table-layout:fixed;">
<COL width=26 align=center>
<COL style="overflow: hidden;text-overflow:ellipsis">
<COL width=30 align=center>
<TR>
<TD>4</TD>
<TD><NOBR>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</NOBR></TD>
<TD><NOBR>bbbbbbbb</NOBR></TD>
</TR>
<TR>
<TD>3</TD>
<TD><NOBR>aaaa aaaaaaaaaaaa aaaaaaaaaaaaa</NOBR></TD>
<TD><NOBR>bb bbbb<NOBR></TD>
</TR>
<TR>
<TD>2</TD>
<TD><NOBR>21wqedsaythgf87iukp9oi-0[op'l;7t8ouie56tydgw4한글두잘되는데~5yrshtferygggg</NOBR></TD>
<TD><NOBR>bbbbbbbb<NOBR></TD>
</TR>
<TR>
<TD>1</TD>
<TD><NOBR>ㅋㅋㅋㅋㅋㅋ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ <NOBR></TD>
<TD><NOBR>ㅎㅎㅎ ㅎㅎ</NOBR></TD>
</TR>
</TABLE>

table-layout:fixed;

overflow:visible;text-overflow:ellipsis;

word-break:break-all;


테이블에 스타일로 하나씩 적용해보면 알거찌....
텍스트 강제로 아래로 내리거나 테이블 보다 클경우 숨기거나 등등





워드브레이크를 사용할때 간혹 적용되지 않고 테이블만 깨질 경우가 있다.
보통 테이블을 짤때 타이틀 줄인 제일 상위줄만 width를 지정해주고 아래는 지정해주지 않는다 나중에 사이즈 변경에 용이하기도 하고 보통 디자인 파일도 그렇게 오기도 하고...
그런데 간혹 테이블 구성이 잘못된건지 요상하게 꼬이게 될때 워드브레이크도 먹지 않는다면 아랫줄에도 width를 기재해주면 이상없이 잘 되는듯 하다...거참 이상하다..-0-;;;;