[CSS] html table display 설정 시, 화면이 깨지는 현상

들어가기 전

display는 block, none만 알고 살아왔다.

jQuery는 show, hide 만 해주면 되니까....

근데 이건 왠걸? jquery에서 제공해주는 attr 로 display 속성을 변경했는데,

table 의 td tag 를 보여주고 숨기는 과정에서 문제가 발생했다.

하나의 tr에 td 태그로 나와야 할 것들이 td 태그로 나오긴 했지만, 하나의 tr에 두 줄은 무어란 말인가....

이유인 즉슨, style 속성을 block 으로 해준 부분에서 잘못되었다.

table 의 td 로 넣기 위해서는 display가 block 이 아닌 table-cell 로 해주어야 한다.

직접 테스트 해보자

if("보여주고 싶을때")

{

$("#table_td").attr("style", "display:table-cell");

}

else

{

// 보여주고 싶지 않을 때,

$("#table_td").attr("style", "none");

}

뒷 이야기...

충분히 jquery show, hide 로 보여주고, 숨기는 게 가능했다.

왜 이때 attr 이용해서 block, none 해줬을까...

block이 '보여주다'를 뜻하는 줄 착각하고 살아왔던 오늘이 부끄럽기만 하다. 레고 블록만 생각했어도....

무식하면 몸이 힘들다는 게 이런 게 아닐까 싶다.

#참고

# http://www.w3schools.com/csSref/pr_class_display.asp