[CSS] 'table'에서 'td'가 높이 100%를 안먹을 때 해결방법

테이블을 만들고 원래의 'td'크기보다 큰 내용이 들어간 셀이 있으면 나머지 'td'들의 높이 100%가 이전 높이를 가지는 현상이 있습니다.

보통 'height'를 '100%'로 지정하면 자신의 부모 크기를 따른다고 생각하기 때문에 그냥 보면 이상합니다.

이것을 의도한 대로 '높이 100%'가 되도록 해보겠습니다.

 

 

1. 원인

어떻게 보면 당연하기도 한 것이 다른 'td'에 의해 해당 줄의 크기가 늘어난 것이기 때문에 자신의 높이는 여전히 이전 크기와 같습니다.

아래 샘플의 첫 번째 'td'를 보시면 연한 색이 최초 'td'높이를 가지고 있는 것을 볼 수 있습니다.

 

See the Pen fill td height by DangGun (@danggun) on CodePen.

 

 

2. 해결방법

정상적인 해결방법은 아니지만 높이를 '1px'로 고정하는 방법이 있습니다.

참고 : stackoverflow - How to make <div> fill <td> height

 

'td'의 높이를 '1px'로 고정하면 다른 'td'의 크기로 강제로 늘어나게 됩니다.

아래 샘플의 두 번째 'td'가 이 방식으로 구현된 'td' 입니다.

 

See the Pen fill td height by DangGun (@danggun) on CodePen.

 

 

결국 '높이 100%'와 같은 효과가 됩니다.

 

 

마무리

모든 브라우저가 이러는 거 보니 이게 의도된 동작인가 봅니다.

어쩔 수 없이 꼼수를 써야 한다는 것이죠 ㅎㅎㅎ