HTML TABLE ROW를 show, hide시 IE7 및 호환성보기에서 css border 잔상남는 경우

원문 : http://finkle.tistory.com/112

사용자 이벤트가 발생할 때마다 특정 테이블의 ROW를 show, hide 해줘야 할 경우가 있다.

$("input[name=autoType]").click(function() {

            if ( $(this).val() == 1 ) {

                $("#autoType_2, #autoType_3, #autoType_sub").hide();

            }

            else if ( $(this).val() == 2 ) {

                $("#autoType_2, #autoType_sub").show(); $("#autoType_3").hide();

            }

            else {

             $("#autoType_3, #autoType_sub").show(); $("#autoType_2").hide();

            }

        });

....

<table>    

    <colgroup>

        <col width="120" />

        <col />

    </colgroup>

    <tr id="authType_2"> .... </tr>

    <tr id="authType_3"> .... </tr>

    <tr id="authType_sub"> .... </tr>

....

</table>

위 코드는 정해진 엘리먼트 클릭 시 클릭한 값에 대응하는 ID 기반의 엘리먼트 요소를 찾아서 화면에서 보이거나 숨기는 코드이다.

IE를 제외하고 의도한데로 모두 잘 동작한다. 그러나 IE7 및 IE8, 9, 10 버전 호환성 보기에서 show, hide 되는 테이블 ROW의 border가 없어지지 않고 화면에 잔상으로 남는 경우가 생긴다. (귀차니즘으로 화면캡쳐는 생략 ㅠㅠ)

CSS도 건드려보고 jQuery API로 개삽질을 해봤으나 해결방법은 의외였다.

<table>    

    <!-- <colgroup>

        <col width="120" />

        <col />

    </colgroup> -->

    <tr id="authType_2"> .... </tr>

    <tr id="authType_3"> .... </tr>

    <tr id="authType_sub"> .... </tr>

....

</table>

위와같이 column 형식 선언부를 없애주면 잘 동작한다. 이런 개 씨X랄 메롱스런 IE !!