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

JSP&JavaScript&HTML

헤르메스의날개 2014. 12. 30. 19:06

728x90

원문 : 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>

<col />

</colgroup>

....

</table>

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

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

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

<table>

<!-- <colgroup>

<col />

</colgroup> -->

....

</table>

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

728x90