css table

일반적으로 table css시에 colgroup을 통해서 width의 %를 주게되면 cell의 contents에 따라서 원하는 너비로 정리가 안되는데
이부분을 해결하는 방법은 2가지가 있다
1. table-layout:fixed와 overflow:hidden을 사용하는방법
2. table-lyaout:fixedt와 word-wrap:break-word을 통해서 cell의 높이가 커지지만 모든 contents를 다 보여주는방법

table-layout

fixed: 지정된 비율로 table자체가 fix된다
auto: table cell에 있는 contents의 width에 맞춰서 테이블이 구성된다

word-break : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

break-all : cell내용에서 어떤단위라도 width에 안맞으면 new line으로 만들어버린다
hypenate : hypenation point에 대해서 new line을 추가
firefox, opera에서는 동작안한다
 

word-wrap :  http://www.w3schools.com/cssref/css3_pr_word-wrap.asp 

break-word : 쪼개질수 없는 word를 쪼갠다
width가 적용된 상태에서만 동작한다
 

text-wrap : 

http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

아직 browser에서 지원하지 않음