HTML table 태그에서 테이블이 늘어나지 않게 하기 > 개발

• 목록

• 페이스북 공유
• 트위터 공유

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


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

제목이 길어지거나 띄어쓰기 없는 영문으로 긴 경우,
두줄로 표현되거나 td 태그가 옆으로 늘어나서 테이블이 깨져 보이는 경우가 있다.

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

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



<table style="table-layout:fixed;">
<tr>
<td>
<div style='display:block; overflow:hidden;'>
제목제목제목제목....제목제목
</div>
</td>
</tr>
</table>



잘라버린다기 보다는, hidden 시켜서 감춰 버리는 것이다.
html 소스 보기를 해 보면, 전체 제목이 다 나온다.

그래서, 문자열을 실제로 잘라버리는 함수를 이용하는 것보다,
이 방법이 검색엔진에 더 유용한 방법이다.

추천0