td 크기 고정

*개요

td를 비율로 고정했음에도 안의 텍스트 길이에 따라 크기가 바뀌는 현상

 

<table>

<td class="td1">..

<td class="td2">..

 

.td1 { width : 5% } 

.td2 { width : 10% }

... 

 

* 해결

table 에 다음 속성 적용

table-layout:fixed;

 

- 텍스트가 td의 바깥으로 넘어간다면?

display : inline-block;

white-space : nowrap;

overflow : hidden; /*inline에는 안먹힘.*/

(또는 text-overflow : ellipsis)

 

 

* 기타 

td 안에 span - 그 안에 텍스트 넣는다면?

(table-layout:fixed 없다면)

텍스트가 늘어날 수록 td 크기도 함께 늘어남.

span 의 크기를 50% 로 줄이거나

td 의 크기를 100px 식으로 고정해도 마찬가지.

 

span 의 너비가 50%가 되고, overflow :hidden 적용하면

글자는 절반밖에 출력 안되지만 너비는 글자의 전체길이만큼 늘어나는 현상 발생.