td 넓이 고정 자동 줄바꿈

테이블로 디자인된 화면에 동적으로 내용이 변경되는 경우

텍스트의 크기에 따라 테이블이 변경되어 디자인이 깨질 경우가 있다.

다음과 같이 td 태그에  <td width=50 style="word-break:break-all"> 스타일을 지정하여 위와 같은 문제를 해결 할 수 있다.

 

1. html의 경우

- 사이즈를 지정하고 스타일을 정해준다.

// 방법 1  <table border=1 width=100>  <tr><td style="word-break:break-all">dddd</td><td>eeee</td></tr>  <tr><td width=50 style="word-break:break-all" >aaaaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddda</td><td width=50>bbbb</td></tr>  <tr><td>dddd</td><td>eeee</td></tr>  <tr><td>gggg</td><td>hhhh</td></tr> </table>      //방법2 <table  width="1200" cellpadding="0" cellspacing="1" style="word-wrap:break-word;word-break:break-all;">

 

 

2. javascript 로 동적으로  테이블을 생성할 경우

- 동적으로 테이블 로우를 추가할 경우는 다음과 같이 해준다.

- 사이즈를 지정하고 스타일을 정해준다.

var newCell_2 = newRow.insertCell(2);         newCell_2.width = 350;   // td size 지정         newCell_2.style.wordBreak  = "break-all";

 

 

3. table  자체를 고정할 경우

- 이와 같이 할경우 텍스트 내용이 많을 경우 잘려서 보여지게 된다. 스크롤도 안됨.

<table border=1 width=100 style="table-layout: fixed" >

출처:http://blog.daum.net/jooneey22/7006643