쓸만한 주저리

table 구조에서 열(column) 단위로 숨기기

봄돌73 2011. 5. 20. 10:44

display:none;visibility:collapse


ie 기준으로 일부에서는 display:none만 되고 일부에서는 visibility:collapse만 된다.

그래서 두 개 다 쓰니 원하는 대로 된다.


colgroup이나 col tag에 쓰면 된다.


-- 수정 --


실제로 동시에 사용하게 되면 ie8에서는 안 먹는다.

ie8에서 display:none이 안 먹어서 찾은 건데...

none인데 보여주는 건 뭐냐고.

visibility 단독으로 사용하면 된다.

그래서 이렇게 했다.


.hidecol1{display:none}

.hidecol2{visibility:collapse}



function showgroup(id){

    if(document.all && (navigator.appVersion.indexOf("MSIE 6.0")>=0 ||  navigator.appVersion.indexOf("MSIE 7.0")>=0)){

      $('colgroup[id!=basic]').addClass('hidecol1')

   $('#'+id).removeClass('hidecol1')

    }

    else{

      $('colgroup[id!=basic]').addClass('hidecol2')

   $('#'+id).removeClass('hidecol2')

    }

}


-- 수정 2 --


위 수정 방식으로 하면 작동은 하는데 7 이하에서 잔상이 남는 현상이 생긴다.

왜 생기는지도 모르겠고 어떻게 없애야 하는지도 모르겠어서

전체 td에 class를 지정해고 class로 선택해서 숨기도록 했다.

위 방법과 비교해도 속도가 상당히 느리다.


var currentclass='player'

function showgroup(targetclass){

    $('.'+currentclass).hide()

    $('.'+targetclass).show()

    currentclass=targetclass

}