table css 적용 문제 발견

2018년 7월 7일

See the Pen table td width:100%? by dan (@hshg_950) on CodePen.

테마 수정도중에 css로 table 관련된 마크업을 수정도중에 문제점을 발견했습니다.
2~3시간동안 머리싸매고 이게 왜그런지 살펴보다가 분명 내가 알고있는 선에서는 맞는 css고 적용도 되야하는게 맞는데
적용되지 않는 문제에대해서 해결법을 찾아내서 문제해결에대해서 공유하려합니다.

table , div 똑같은 css를 적용시켜주어도 width값이 적용되지 않는문제

해결법은 간단 table 에 아무런 display이가 주어지지 않으면 table이라는 display를 갖습니다.
원래 개발자도구에서 style 탭으로 볼때 어떤 속성이 적용되어있는지 보여야하는데 보이지 않아서 이러한 고생을한거 같습니다

table에 강제적으로 display: block을 태이블 안에 구조에도 똑같이 적용하면 위에 div랑 똑같은 모습으로 적용되는 것을 볼수있다.


문제원인

table 포함한 table 관련태그의 모든 display를 block으로 바꿔야 css가 적용된다.
이런경우는 table을 쓰지 말길!
저는 table로 만들어져있는 것을 수정해야하는 이유떄문에 이렇게 적용하였습니다.