'CSS' 카테고리의 글 목록

'CSS'에 해당되는 글 2건

2014.05.20 HTML 테이블 높이 100% 맨들기 2
2011.11.12 table cellspacing, cellpadding 속성을 css 로 처리하기 1

HTML 테이블 높이 100% 맨들기

CSS 2014. 5. 20. 17:59

뭐 하나 수정할게 있어서 소스를 보니 무려 HTML DOCTYPE 이 없고, 레이아웃이 table로 되 있었다. -.-

대충 요대로 두고 조금 수정하고 끝내려니까 레이아웃이 훅 깨져버려 결국 DOCTYPE을 추가하고 이것저것 군데군데 소스를 꽤 수정했다.

DOCTYPE을 추가해서 훅 바뀐것 중에 하나가 전체 레이아웃을 맹글고 있는 맨 바깥 테이블 높이가 100%가 안되는 것이였다.

기냥 다시 원상복구 할려다가 고친게 아까워서 검색을 해보니 역시 똘똘한 사람들이 많았다.

아무튼 테이블 높이를 100% 로 할려면

요렇게 html, body 스타일에 height: 100% 를 적용시켜 주고 해당 테이블 스타일에 height:100% 를 추가해 주면 된다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            html, body{ height:100%; margin:0px; }
        </style>
    </head>
 
    <body>
        <table style="height:100%; width:100%;">
            <tr>
                <td style="text-align:center;">
                    100% 테이블 높이
                </td>
            </tr>
        </table>
    </body>
</html>

※ DOCTYPE 이 없으면 IE 개발자도구로 보면 문서모드가 쿼크 모드로 보인다. 중요한 DOCTYPE을 안 넣다니 -.-

※ 제발 코딩할때 들여쓰기 좀 했으면 좋겠다. -_- 들여쓰기만 잘해도 소스가 있어보인다 -.-

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

table cellspacing, cellpadding 속성을 css 로 처리하기 (1)	2011.11.12

Posted by 스토브

table cellspacing, cellpadding 속성을 css 로 처리하기

CSS 2011. 11. 12. 21:42

cellpadding 속성은 td style에 padding 을 주면 동일한 효과가 적용되고,

cellspacing 속성은 table style에 border-spacing 을 적용하면 동일한 효과가 적용된다.

CSS 로 cellspacing, cellpadding 처리
가나다라	가나다라
가나다라	가나다라

<style>
    #tbl {border-spacing:100px;}
    #tbl td {padding:30px;}
</style>

<table id="tbl" border="1px">
    <caption>CSS 로 cellspacing, cellpadding 처리</caption>
    <tr>
        <td>가나다라</td>
        <td>가나다라</td>
    </tr>
    <tr>
        <td>가나다라</td>
        <td>가나다라</td>
    </tr>
</table>