테이블 태그 td 또는 tr에 min-height 적용 방법

테이블안에 존재하는 태그 중 콘텐츠를 보여주는 tr, th, td 태그들은 table-row의 display 속성 값을 가지게 됩니다. 하지만 이 속성 때문에 min-height를 사용한 최소 높이를 설정할 수가 없는데 어떻게 방법이 없을까요?

아쉽지만 결론부터 얘기하면 display 값을 바꾸지 않는 이상 방법은 없습니다. 다만 아래와 같은 대체 방법들이 존재하니 참고하세요.

! table 태그의 부모 태그에 min-height 설정하기

만약 table 전체에 min-height를 설정한다면 table 태그 대신에 바로 위에 div 부모 태그를 하나 추가하여 스타일을 지정할 수 있습니다.

위와 같이 설정하고 min-height 및 기타 테이블의 스타일을 div 태그에도 적용해서 마치 테이블 전체가 min-height가 되는 것처럼 동작하는 방법입니다.

! min-height를 height 속성으로 대체

height 값은 설정이 가능하므로 min-height 속성을 height로 바꾸는 것 역시 방법입니다.

! 태그안에 div 등의 block 타입의 태그를 넣는 방법

div 등의 태그를 넣어주어 그 안에 min-height를 적용하는 방법이 가장 효과적이라 할 수 있습니다.


그 외에도 td 태그에 padding값 위, 아래에 주는 것도 하나의 방법입니다. 정상적인 방법으로 min-height를 사용하는 방법은 없으므로 가능한 선에서 대체하는 것이 최선입니다.