Mozilla 한국 커뮤니티

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
<!-- 
fieldset {
    float : left ;
    display : block ;
    margin : 0.5em 0.5em 0.5em 0.5em ;
}

th {
    background : #3333FF;
    color :#FFFFFF;
}


-->
</style>
</head>

<body>

<form action="">
<fieldset>
    <legend>Fieldset 1</legend>
    <table>
        <tr>
            <th>제목</th>
            <td><input type="text" size="20" /></td>
        </tr>
        <tr>
            <th>첫번째</th>
            <td><textarea  rows="5" cols="50" ></textarea></td>    
        </tr>
        <tr>
            <th>두번째th</th>
            <td><textarea  rows="5" cols="50" ></textarea></td>  
        </tr>
    </table>
</fieldset>


<fieldset>
    <legend>Fieldset 2</legend>
    <table>
        <tr>
            <th>제목</th>
            <td><input type="text" size="40" /></td>
        </tr>
        <tr>
            <th>첫번째</th>
            <td><input type="text" size="40" /></td>    
        </tr>
        <tr>
            <th>두번째</th>
            <td><input type="text" size="40" /></td>  
        </tr>
    </table>
</fieldset>

<fieldset>
    <legend>Fieldset 3</legend>
    <table>
        <tr>
            <th>제목</th>
            <td><input type="text" size="40" /></td>
        </tr>
        <tr>
            <th>첫번째</th>
            <td><input type="text" size="40" /></td>    
        </tr>
        <tr>
            <th>두번째</th>
            <td><input type="text" size="40" /></td>  
        </tr>
    </table>
</fieldset>
</form>
</body>
</html>

위 페이지를 firefox 에서 보면 th 의 폭이 각각 다릅니다. (1.5rc1)
IE 에서는 th 의 폭이 서로 동일하게 표시됩니다.
뭐가 문제일까요??? 저는 IE 에서처럼 th 의 폭이 동일하게 만들고 싶습니다.
제가 해본 바로는 fieldset 을 각각 div 안에 집어넣고, div 에 float : left 속성을
주면 제가 원하는 대로 되더군요. 하지만 불필요하게 div 를 써야하는 것 같아
마음에 들지 않습니다. 뭔가 다른 방법이 없을까요???

width를 적용 하셨나요? 코드에서는 안보이는 것 같은데...
wdith를 적용안하면 각각 다르게 나오는 것이 당연한 결과입니다.

th {
width: 5em;
}

요렇게요... -_-a

hyeonseok wrote:width를 적용 하셨나요? 코드에서는 안보이는 것 같은데...
wdith를 적용안하면 각각 다르게 나오는 것이 당연한 결과입니다.

th {
width: 5em;
}

요렇게요... -_-a

float : left ; 속성을 쓰지 않는 경우에는 width 속성이 없어도 같은 폭으로 표시됩니다. 그리고 float:left 속성을 쓰는 경우에는 width 속성을 써도 소용이 없습니다.(더 이상해지더군요.....)

정확히 어떠한 화면을 원하시는지 알 수가 없어서 자세한 답변을 드리기는 힘듭니다. 그리고 Firefox 의 랜더링에도 약간 문제가 있는 것 같습니다. safari에서는 잘 나오는데 firefox는 table 의 컬럼 너비를 이상하게 계산 하네요.

Code: Select all

fieldset {
    float : left ;
    display : block ;
    margin : 0.5em 0.5em 0.5em 0.5em ;
    width: 40%;
}
table {
	table-layout: fixed;
	width: 100%;
}
th {
    background : #3333FF;
    color :#FFFFFF;
    width: 5em;
}

이렇게 넣어주니 th의 폭은 같게 나옵니다만...이게 원하신 결과인가요?
그리고 float 시키는 엘리먼트는 width 나 height 를 지정을 해주는 것이 좋습니다.

Mozilla 한국 커뮤니티

table column 폭이 각각 다른 문제

table column 폭이 각각 다른 문제