basecom의 놀이터~!! :: [CSS] table-layout: fixed;

전체 (347)

[CSS] table-layout: fixed;

2004/11/07 13:42

이 스타일을 적용시키면 테이블이 고정된다.

지정한 픽셀에 따라, 퍼센테이지에 따라..

이렇게 고정해놓으면 미리 계산할 필요가 없어서 화면에 뿌려지는 속도도 빨라진다고 한다.

근데 이 태그엔 치명적인 약점이 있다. colspan이나 rowspan으로 셀을 합칠때, 각각의 셀에 대한 픽셀수를 따로 지정해봤자 그냥 동일한 크기로 나타난다는 것이다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

6개의 코멘트가 있고, 트랙백이 없습니다.

http://basecom.kr/trackback/127

키드
2004/11/07 13:58
colspan이나 rowspan으로 셀을 합칠때 동일한 크기로 나타난다는게
정확히 어떤 의미인지 선뜻 이해되지는 않지만,
table-layout:fixed를 쓴다고 해서 셀이 동일한 크기로 나타나지는 않는걸로 알고있는데요.

실례가 안된다면 정확히 어떤 때 그런 문제가 생기는지 예제를 하나 부탁드려도 될까요?
궁금하네요... 새로운걸 하나 배워갈지도 모르겠네요... ^^;;

Edit/Del Reply
basecom
2004/11/07 19:16
저도 이것땜에 고생하다가 알게된건데요. 검색해보니 혹자는 버그라고도 하더군요;; 예를들면 이런 거죠.
<table style="table-layout: fixed; border: solid 1 black" width="150"><tr><td style="border: 1 solid black" colspan="2">1</td></tr><tr><td style="border: 1 solid black" width="50">2</td><td style="border: 1 black solide" width="150">3</td></tr></table>

이런 소스가 있다면 테이블의 전체 너비는 150픽셀로 고정되고, 첫번째줄은 그냥 한 칸이지만 두번째줄은 두 칸이죠. 여기서 두번째줄의 첫칸엔 50, 두번째칸엔 100을 줘서 저런식으로 나눠질 것을 기대하지만 실제론 75,75 로 나눠진다는 겁니다.

혹시 해결법 알고 계시면 알려주세요. 전 그냥 테이블 속에 테이블 만들었습니다;;

Edit/Del Reply
키드
2004/11/08 03:46
아~ 그렇군요.
적어주신 소스는 말씀처럼 50, 150으로 넓이가 지정되어 있음에도 75씩 나타나는군요.
처음 알았습니다. 저렇게 써본일이 없어서리... ^^;;

저 문제는 td에 넓이값을 주었기 때문에 발생한 겁니다.
table-layout:fixed는 col과 같이 사용해야 합니다.

<table style="table-layout: fixed; border: solid 1 black" width="150"><col width="50"><col width="150"><tr><td style="border: 1 solid black" colspan="2">1</td>
</tr><tr><td style="border: 1 solid black">2</td><td style="border: 1 black solid">3</td></tr></table>

이렇게 하면 정상적으로 출력됩니다. 참고로 예전에 써논 글 트랙백 겁니다.

Edit/Del Reply
basecom
2004/11/09 01:30
아.. 그렇게 하면 되는거였군요~ 감사합니다^^ 여러가지 배웁니다. 이래서 블로그가 좋습니다.

Edit/Del Reply
pychban
2010/07/28 06:28
정말 큰 도움 얻고 갑니다..감사합니다~!

Edit/Del Reply
ing
2010/11/10 12:40
감사합니다

Edit/Del Reply