table tr의 display 옵션을 변경하면 colspan이 깨진다.

뭔가 만들다가 테이블 내용 중 한 줄을 없앴다가 다시 보이게 해야 할 상황이 되었다. 간단하게 생각했는데 예상치 못한 문제가 발생.

display: none;으로 설정했다가 다시 display:inline; 으로 변경하니 colspan이 적용 안되는 문제였다. (아래 첫번째 항목에서 테스트 해보자)

여러 방법으로 애써봤는데 결국 다 실패.

결국 알아낸 이유는 table-tr의 display 속성 기본값이 inline이 아니라는 거였다. 

display:table-row로 변경해 주니 해결되었다. 아래 2번 항목에서 테스트해볼 수 있다.

1. 문제가 발생하는 경우

첫번째 버튼을 누르면 2번째 줄 tr의 속성이 display:none; 으로 변경되고, 두번째 버튼을 누르면 display:inline; 로 변경된다.
두개의 버튼을 순서대로 눌러보면 어떤 문제가 발생하는 지 확인할 수 있다.

제목1	제목2	제목3	제목4
첫번째줄 첫번째칸	첫번째줄 두번째칸	첫번째줄 세번째칸	첫번째줄 네번째칸
colspan이 적용된 두번째 줄
세번째줄 첫번째칸	세번째줄 두번째칸	세번째줄 세번째칸	세번째줄 네번째칸
네번째줄 첫번째칸	네번째줄 두번째칸	네번째줄 세번째칸	네번째줄 네번째칸

2. 문제가 발생하지 않는 경우

첫번째 버튼을 누르면 2번째 줄 tr의 속성이 display:none; 으로 변경되고, 두번째 버튼을 누르면 display:table-row; 로 변경된다.
의도했던 대로 정확하게 동작하는 것을 볼 수 있다.

제목1	제목2	제목3	제목4
첫번째줄 첫번째칸	첫번째줄 두번째칸	첫번째줄 세번째칸	첫번째줄 네번째칸
colspan이 적용된 두번째 줄
세번째줄 첫번째칸	세번째줄 두번째칸	세번째줄 세번째칸	세번째줄 네번째칸
네번째줄 첫번째칸	네번째줄 두번째칸	네번째줄 세번째칸	네번째줄 네번째칸

3. (번외) jQuery의 hide(), show() 함수를 이용하는 경우

사실 이 문제는 display 속성을 변경하는 것이 문제가 생기는 원인이라고 할 수 있는데, jQuery를 이용할 경우 hide(), show() 함수를 사용하면 그런 걱정을 할 필요가 없다. 아래의 버튼은 hide(), show()를 사용한다. 정상적으로 동작하는 것을 볼 수 있다.

제목1	제목2	제목3	제목4
첫번째줄 첫번째칸	첫번째줄 두번째칸	첫번째줄 세번째칸	첫번째줄 네번째칸
colspan이 적용된 두번째 줄
세번째줄 첫번째칸	세번째줄 두번째칸	세번째줄 세번째칸	세번째줄 네번째칸
네번째줄 첫번째칸	네번째줄 두번째칸	네번째줄 세번째칸	네번째줄 네번째칸