[HTML] table tr display 적용 깨짐 현상 해결

화면 상황에 따라 table tr(행)을 숨겼다가 보여줘야 할 상황이 있다.

해당 tr을 숨기기 위해서 "display: none;"으로 스타일을 주면 정상적으로 숨겨질 것이다.

여기서 문제는 다시 보여주기 위해서 "display: block;"을 할 경우 해당 행이 깨지는 현상을 볼 수 있을 것이다.

 

 

이런 현상을 처음 접하면 tr태그를 잘못 수정한 것으로 보고 원인 파악하는데 많은 시간을 들일 수 있다.

 

table의 경우 "display: block;"을 "display: ;" 공백으로 처리하면 된다.

스크립트로 show(), hide()를 사용해도 되지만 display를 block으로 했다가 깨짐 현상이 발생했을때 원인을 찾기 위해 많은 시간을 들이지 말고 기억해두면 간단하게 해결될 문제이다.

 

해결방법

숨기기 - display: none;

보이기 - display: ;