[CSS] display 에 관해

IE에서는 <tr id="mytr" onClick="show_tr()"><td colspan='2'>내용</td></tr> 과 같은 상황에서

function show_tr() {
    var t = document.getElementById("mytr");
    t.style.display = t.style.display == "none" ? "block" : "none";
}

과 같은 스크립트로 충분히 소화가 가능하나...

W3C의 정의에 의하면, display 속성이 none인 tr은 실질적으로 block이나 inline인것처럼

해당위치에서의 자리를 차지하지 못한다는것이 정설.

따라서 Safari나 Firefox 브라우저에서는 위와같이 사용 할 경우, <td>들을 합치지 못하여

한 열(운좋아봤자 2개 열)이 합쳐져서 세로로 쓰여지는 내용을 보게 된다.

이럴 경우,

해당 <tr><td>와 </td></tr> 사이에 <table></table>로 내용을 넣고

script의 function 에서는 해당 table 의 display속성을 변경해주면 3종 브라우저에 모두 제대로 보이게 된다.


<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td colspan="2">
        <table id="mytr">
            <tr>
                <td></td>
            </tr>
        </table>
    </td>
</tr>

script는 위와 같다.