테이블 넓이 고정 태그:자동 줄 바꿈(break-all, nowrap, fixed)
※ 배경이미지 반복하지 않기 : style="background-repeat:no-repeat;"
작성자 : 단국강토
등록날짜 : 2009.02.05 09:50
6,588
- 내용이 들어가는 table tag의 속성에 아래 내용을 추가합니다.
자동 줄 바꿈 : style="word-break:break-all;"
테이블 넓이 고정 : style="table-layout:fixed;"
자동 줄 바꿈 : style="word-break:break-all;"
테이블 넓이 고정 : style="table-layout:fixed;"
| 1. style="table-layout:fixed;" | 테이블의 크기(넓이)를 고정해 줍니다. 가로·세로 모두 고정이 됩니다. | ||||||
| 2. style="word-break:break-all;" | 1의 방법으로 고정된 테이블에 긴 글을 넣을경우 가로가 고정되어 있으므로 글자가 잘려 보이는 경우가 발생합니다. 이것을 방지하고 글의 자동 줄바꿈 효과를 줍니다. | ||||||
| |||||||
| 3. height="auto" | 1.의 방법으로 고정된 테이블의 세로때문에 글이 고정된 세로길이까지만 보입니다. 이것을 방지하기위해 세로의 길이를 오토로 조정해줍니다. | ||||||
| 4. <td ... nowrap> | 특정 셀 안의 내용은 지정된 테이블의 폭에 상관없이 줄바꿈 되지 않게 할 수 있는 방법 | ||||||
| |||||||
| 5. 응용 | 긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이도록해서 마치 테이블 길이에 맞게 글자를 자른것처럼 효과를 냅니다. 테이블 태그에 style="table-layout:fixed"를 넣어주고 적용할 TD 태그에 nowrap 옵션을 넣어줍니다. | ||||||
| |||||||
| |||||||
※ 배경이미지 반복하지 않기 : style="background-repeat:no-repeat;"
[출처]마루아라
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
