개발2015. 1. 20. 23:48
300x250



ㅁ 테이블 늘어나거나 줄바꿈되지 않게 하는 방법



게시판의 글 목록 등에서 table 태그를 사용할 때, 


제목이 길어지거나 띄어쓰기 없는 영문으로 긴 경우, 

두줄로 표현되거나 td 태그가 옆으로 늘어나서 테이블이 깨져 보이는 경우가 있다. 


한줄로 테이블을 고정하고자 할 때, 아래와 같은 코드를 사용하면 된다. 


제목이 긴 경우에도 줄바꿈되거나 두줄로 만들지 않고, td 를 벗어나는 긴 글은 잘라 버리고 한줄로 표현해 준다. 




<table style="table-layout:fixed;">

<tr>

<td>

<div style='display:block; overflow:hidden;'>

제목제목제목제목....제목제목

</div>

</td>

</tr>

</table>




잘라버린다기 보다는, hidden 시켜서 감춰 버리는 것이다. 

html 소스 보기를 해 보면, 전체 제목이 다 나온다. 


그래서, 문자열을 실제로 잘라버리는 함수를 이용하는 것보다,

이 방법이 검색엔진에 더 유용한 방법이다. 


300x250
Posted by 마스타