(css) table 테이블 깨짐 방지 td 줄바꿈 방지

(css) table 테이블 깨짐 방지 td 줄바꿈방지

 

안녕하세요. 오늘은 테이블깨짐의 주 원인인 줄바꿈에 대해 알아보는 시간을 가져보겠습니다.

흔히 우리 테이블에서 td 태그 안에 주는 줄바꿈방지 스타일로는

 

white-space:nowrap;

 

이걸 많이 씁니다. 그런데 이것 만으로 해결되지 않는 경우가 있으니..

이와 같은 경우는 테이블이 내가 정해둔 td width 값을 유지하지 않고 막 크기를 늘리기도 하고 줄이기도 하고.. 

개발자들의 수명을 단축시킬때가 많지요.. OTL..

 

복잡한 테이블이고 특정 액션에 따라 tr 또는 td를 유동적으로 바뀌는 상황에서는 테이블이 쉽게 깨지는 경우가 많습니다. 이렇게 말하면 프론트엔드만 개발했던 분들은 도대체 그런 경우가 어딨냐고 물으시겠지만..

 

예를 들면 이렇습니다.

디자인상 행이 5개, 열이 4개인 테이블이었지만..

특정 조건(통상 if문)에 따라 tr 또는 td를

추가로 더 늘리기도 하고 줄이기도 하고...

어쩔 때는 그 안에 데이터(글자수)가 적었다가 많았다가..

그러다보면 원래 디자인 되어있던 테이블이 막 그 안의 데이터에 따라 깨지는 현상이 발생하는것이죠. 

거기에 호환성보기모드/비호환성보기모드 에 따라 상황이 왔다 갔다.. ie, 크롬에 따라 또 다르고..

이런거 잘못 걸리면 개발자 수명 단축됩니다. 상당히 짜증나요 ㅠㅠ

 

그런데 나의 이런 고민을 해결해준 단 한 줄의 스타일이 있었으니

그거슨 바로바로!!!!

 

table-layout:fixed;

 

와. 저 한 줄만 갖다 넣으면 되는거였어.. ㅠㅠ테이블 깨짐과 이상한 곳에서 줄바꿈이 되는 현상을 해소하기 위해 몇 시간을 고심하던 끝에 찾았다.

 

생각보다 별거 아니었지만.. 꽤 요긴하게 쓰일것 같은 css ㅋㅋㅋ

 

 

 

댓글과 구독은 저를 춤추게 합니당.

모두모두 즐코딩 하세열~