HTML table 태그에서 테이블이 늘어나지 않게 하기
페이지 정보
본문
ㅁ 테이블 늘어나거나 줄바꿈되지 않게 하는 방법
게시판의 글 목록 등에서 table 태그를 사용할 때,
제목이 길어지거나 띄어쓰기 없는 영문으로 긴 경우,
두줄로 표현되거나 td 태그가 옆으로 늘어나서 테이블이 깨져 보이는 경우가 있다.
한줄로 테이블을 고정하고자 할 때, 아래와 같은 코드를 사용하면 된다.
제목이 긴 경우에도 줄바꿈되거나 두줄로 만들지 않고, td 를 벗어나는 긴 글은 잘라 버리고 한줄로 표현해 준다.
<table style="table-layout:fixed;">
<tr>
<td>
<div style='display:block; overflow:hidden;'>
제목제목제목제목....제목제목
</div>
</td>
</tr>
</table>
잘라버린다기 보다는, hidden 시켜서 감춰 버리는 것이다.
html 소스 보기를 해 보면, 전체 제목이 다 나온다.
그래서, 문자열을 실제로 잘라버리는 함수를 이용하는 것보다,
이 방법이 검색엔진에 더 유용한 방법이다.
게시판의 글 목록 등에서 table 태그를 사용할 때,
제목이 길어지거나 띄어쓰기 없는 영문으로 긴 경우,
두줄로 표현되거나 td 태그가 옆으로 늘어나서 테이블이 깨져 보이는 경우가 있다.
한줄로 테이블을 고정하고자 할 때, 아래와 같은 코드를 사용하면 된다.
제목이 긴 경우에도 줄바꿈되거나 두줄로 만들지 않고, td 를 벗어나는 긴 글은 잘라 버리고 한줄로 표현해 준다.
<table style="table-layout:fixed;">
<tr>
<td>
<div style='display:block; overflow:hidden;'>
제목제목제목제목....제목제목
</div>
</td>
</tr>
</table>
잘라버린다기 보다는, hidden 시켜서 감춰 버리는 것이다.
html 소스 보기를 해 보면, 전체 제목이 다 나온다.
그래서, 문자열을 실제로 잘라버리는 함수를 이용하는 것보다,
이 방법이 검색엔진에 더 유용한 방법이다.
추천0
댓글목록
등록된 댓글이 없습니다.
1
공공데이터포털 OpenAPI
